（涉及到C#,jquery,文本编辑器，本项目是网上商城，主要是总管理员向各卖家发送消息）关于消息内容的部分显隐的问题

Question

本帖最后由 XiaoPeiyuan2020 于 2014-06-07 09:22:55 编辑

Answer 1

你说的那两行好像并没有什么问题，做了个简单的测试http://jsfiddle.net/8HpNt/2/，可以正常隐藏和显示的。你可以打开看一下。我用的是 $("#read").html，因为在线的时候 $("#read").innerHTML没有反应。
你提到消息可能是HTML的， 即可能包含html标签。有一个问题就是你在截取消息的时候，有没有考虑到会截断html标签，导致整个页面结构乱了，比如消息是<a href="xxx">News</a>，然后你截取到<a href="xxx">News<，后面的</a>没有闭合，就会和你的more最后的</a>变成一对，这样你的class="more"就不能被识别了，即<a href="xxx">News<<a class="more">More</a>。<div>
    <div>
        <span>
            <span id="read" class="status">Unread</span>
        </span>Short Message
        <a class="more">More</a>
    </div>
    <div style="display: none;">
        <span class="status">Read</span>
        Full Message
        <a class="col">Hide</a>
    </div>
<div>
$(".more").click(function(){
    if ($("#read").html() == "Unread")
    {
        $("#read").html("Read");
    }
    $(this).parent().hide().next().show();
});
$(".col").click(function(){
    //if ($("#read").html() == "Unread")
    //{
    //    $("#read").html("Read");
    //}
    $(this).parent().hide().prev().show();
});
body {
    font-family: Arial;
}
.status {
    font-weight: bold;
}
.more, .col {
    border: 1px solid blue;
    color: red;
}

Answer 2

亲，关键这里是涉及到消息列表 #read 是行不通的

Answer 3

对哦，这里是列表，id应该是唯一的，怎么会用设置id="read"呢？我是参照你的截图设置的。
我现在不用id，把消息阅览那个状态用了class="status0"，然后通过这个获取和修改它。因为初始状态消息详情不显示，只有点击more才显示，而这时会把消息状态改成已读，所以消息详情的状态永远是已读，不需要修改。其实在考虑是不是只用一个span存放状态就够了，这是后话。楼主看看下面这样的演示链接，还有没有什么问题
http://jsfiddle.net/8HpNt/3/

Answer 4

也就是说你点击收起的时候   文本编辑器里面的<p>也隐藏了 导致收起变为了空的div？元素被隐藏了？。
应该不会出现这种情况啊。$('.T').parent('.LiSelect').css('display','none') 试试看 不行的话 我写一个demo给你

Answer 5

$('.T').parent('.LiSelect').css('display','none') 
这种方法表示不是很懂

Answer 6

$('.T').parent('.LiSelect').css('display','none') 
这种方法表示不是很懂
我的意思就是 直接定位到 点击的节点的父节点 然后把他的css样式设置隐藏。  手打的见谅

Answer 7

第二个问题，你可以通过jQuery获取你的消息内容节点，不管是消息预览还是消息全文，这个应该没问题吧？然后用jQuery获取消息内容节点内的所有超级链接节点find('a')并给他们绑定事件click事件，在事件函数里面你就可以做很多事情了，比如更新状态，AJAX传回服务器更新数据库等
第三个问题也是类似的，就是当客户点击更新状态的时候，在点击事件的函数里，处理更新界面，传回服务器更新数据库等操作。
使用jQuery 遍历 - each() 方法绑定，不需要每个元素单独去添加事件，比如$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});不知道我说的能不能被理解

Answer 8

$('.T').parent('.LiSelect').css('display','none') 
这种方法表示不是很懂
我的意思就是 直接定位到 点击的节点的父节点 然后把他的css样式设置隐藏。  手打的见谅这个表示不行哟

Answer 9

到下面的链接里自己测试一下吧
http://jsfiddle.net/8HpNt/4/
1) 点击More,如果当前状态为未读，则更新为已读，否则不变，自己可以在updateStatus函数里在添加回传到服务器的操作。然后隐藏More按钮，消息预览和删除按钮 (我看到楼主的截图里面消息详情里面就没有删除按钮了，所以隐藏了)，并且显示收起按钮，消息详情和日期。
2) 点击收起，如果当前状态为未读 (理论上说不会出现这种情况，因为出现收起按钮的时候已经点击了More按钮， 所以如果是维度的话，应该已经更新为已读了)，则更新为已读，否则不变，自己可以在updateStatus函数里在添加会传到服务器的操作。然后隐藏收起按钮，消息详情和日期，并且显示More按钮，消息预览和删除按钮。
3) 如果消息预览或者消息详情里面有链接，点击链接，如果当前状态为未读，则更新为已读，否则不变。在演示的函数中，我使用了return false;阻止了打开链接，可以根据情况注释掉这行。
4) 点击删除按钮，获取消息id，自己可以在deleteMsg函数里在添加回传到服务器的操作。

Answer 10

到下面的链接里自己测试一下吧，看看还有什么问题
http://jsfiddle.net/8HpNt/4/

Answer 11

更新了演示代码http://jsfiddle.net/8HpNt/5/
1) 为了方便处理鼠标事件，把消息放在一个块里面，并把消息id放在这个div里，通过mouseover和mouseout函数处理删除和日期的显示切换。本来用的hover，但是hover必须在鼠标先移出再移进的时候才会切换。
2) 是不完全明白你的要求。先在演示代码里面的效果是，点击more(更多)的时候，检查状态是否是未读，如果是的话，改成已读，然后可以通过ajax把id传回到服务器，更新数据库中该条记录的状态。因为界面上的状态文字已经改成已读了，所以不管点击hide(收起)还是再点击more(更多)的时候，状态都是已读。并且刷新页面的时候，因为数据已经传回服务器并在数据库中更新了该条记录的状态，所以也将显示已读。这是我理解的你的需求。如果不是这样的话，可以在讨论。另外因为我用的是英文Read,Unread来表示状态，所以用的是if (status.text().trim() == 'Unread')，你的项目中用的是中文， 所以判断的时候用"未读“替换"Unread"。
3) 你说的“我们这里要处理的是一个列表消息的链接”在哪里？是指所有的消息吗？关键是两个，一个是获取状态为未读的消息，另一个是消息的id。当然那你也可以简单的不管消息状态，把列表的消息状态全部更新成已读(数据量大的话可能不是很合适)。
4) 没问题。
5) 更新的演示代码添加了全选，更新选中消息的状态，删除选中消息等方法。自己测试一下。

Answer 12

总的说：你的案例没有错，就是要那种效果
对于3) 链接就在楼上的倒数第二天消息，有些绿色字体‘ffffffaaaaaaaaa’那些啊,点击他们也要将该消息设置为已读，不刷新页面。只是我的在真实的项目里面操作，你的例子应用进去有点难

Answer 13

http://jsfiddle.net/8HpNt/6/

Answer 14

关键是我的id=“con_1”、、、有加前缀啊，不是单纯的数字啊，单纯的数字已经用了一次啊function getSelected()
{
var msgparent = $(".com_right").children('.msgitem');
var selected = [];
msgparent.children('input:checked').each(function() {
selected.push($(this).parent().attr('id'));
});
alert(selected);
return selected;
}

Answer 15

是根据上面截图@item.ID。id是一个消息的标识，演示用数字只是为了方便。下面更新的演示示例换成了非数字的。
前台的id甚至可以和数据库里的不一样，只要能转换成数据库能识别的。比如数据库里是con_1，con_2， con_6，前台可以是hh1-ss，hh2-ss，hh6-ss。获取前台的这些id后，把前缀hh和后缀-ss去掉，再在前面加上con_，就是数据库的id了。想怎么处理就怎么处理，只要有规律。
代码演示关键是我的id=“con_1”、、、有加前缀啊，不是单纯的数字啊，单纯的数字已经用了一次啊function getSelected()
{
var msgparent = $(".com_right").children('.msgitem');
var selected = [];
msgparent.children('input:checked').each(function() {
selected.push($(this).parent().attr('id'));
});
alert(selected);
return selected;
}

Answer 16

亲，你好！经过这几天的研究，你的完全可以。但是就是我忘了说一个需求，就是 item.Content是用文本编辑器编辑的，里面要过滤除了a以外的所有标签和里面的样式， a标签要留住。你好！请问怎么实现

Answer 17

试一下下面的代码
参考: How do I filter all HTML tags except a certain whitelist?static string SanitizeHtml(string html)
{
    string acceptable = "a";
    string stringPattern = @"</?(?(?=" + acceptable + @")notag|[a-zA-Z0-9]+)(?:\s[a-zA-Z0-9\-]+=?(?:(["",']?).*?\1?)?)*\s*/?>";
    return Regex.Replace(html, stringPattern, "");
}

Answer 18

关键是我的id=“con_1”、、、有加前缀啊，不是单纯的数字啊，单纯的数字已经用了一次啊function getSelected()
{
var msgparent = $(".com_right").children('.msgitem');
var selected = [];
msgparent.children('input:checked').each(function() {
selected.push($(this).parent().attr('id'));
});
alert(selected);
return selected;
}
功能有点不足的是刷新页面后选中的状态依旧选中，这个该怎么去除选中状态