Question

我正在使用jQuery中的selectable()，它的工作方式与我想要的一样。但我想进入下一步，我希望它在主聊天中选择消息。因此，所选昵称的文本也会在主聊天中突出显示。

更新

我想要做的是，当从用户中选择昵称时，自动从用户中选择频道消息。

Answer 1

您可以通过添加课程ui-selected并使用selected事件强制对元素进行选择：

$(function () {
    $('#users').selectable({
        selected: function (event, ui) {
            $(".channelmessage span.nickname.ui-selected").removeClass("ui-selected");
            $(".channelmessage span.nickname:contains('" + ui.selected.id + "')").addClass("ui-selected");
        }
    });
});

在示例中，我使用span内容作为包含selctor，我已经修改了一些HTML标记，如：

<p class="channelmessage"> <span class="nickname">Nickname2</span><span>:</span>
    <span class="message">Message</span>
</p>

演示：http://jsfiddle.net/IrvinDominin/LnnLT/

Answer 2

Try this - 点击每个名称也会使用＆＃39;停止＆＃39; selectable（）的属性。

$(function () {
            $("#users").selectable({
                stop: function () {
                    $("#users li").each(function (key) {
                       $("#Nickname" +(key+1)+ "_message").css({"background":"white","color":"black"});   
                    });
                    $(".ui-selected", this).each(function (key) {

                       var index = $( "#users li" ).index( this );

                        $("#Nickname" +(index + 1)+ "_message").css({"background":"#F39814","color":"white"});

                    });
                }
            });
        });

Answer 3

为每个聊天消息添加一个虚拟类很容易，选择器比搜索名称字符串更有效。

$(function() {
    $( '#users').selectable({
        filter: "li",
        selecting: function( event, ui ) {
            $(".ui-selected").removeClass("ui-selected");
            $('.channelmessage span.message.' + ui.selecting.id).addClass("ui-selected");
        }
    });
});

这里有一个可用的JSFiddle示例：

http://jsfiddle.net/56SkH/21/

Answer 4

$(function() {
    $('#users').selectable({
        selected: function(event, ui) {
            var user = ui.selected.id.toLowerCase();
            $('.channelmessage.'+user).addClass('ui-selected');
        },
        unselected: function(event, ui) {
            $('.channelmessage').removeClass('ui-selected');
        },
    });
});

DEMO：http://jsfiddle.net/56SkH/23/

用选择器随处选择用户名

4 个答案: