Question

我有频道：

<div id="panel">
            <pre class="channel" id="one">ONE</pre>
            <pre class="channel" id="two">TWO</pre>
</div>

我想用这种方式标记带有属性的频道：

function onSelectChannel()
{
    // callback
    var foundChannel = $(this);
    var prevSelectedChannel = $("[selected='true']");

    if (foundChannel.size() > 0) {
        foundChannel.css('background-color', selectedChannelColor);
        foundChannel.prop("selected", "true");

        if (prevSelectedChannel.size() > 0){
            prevSelectedChannel.css('background-color', channelsColor);
            prevSelectedChannel.prop("selected", "false");
        }
    }
}

我可以找到 foundChannel 并设置属性（我可以在调试器中看到它），但我找不到已设置属性的对象。 jQuery什么都不返回。

更新：我想用标记标记一些（不相关哪一个）元素（它可以有任何名称），我的意思是：设置属性或属性的任何值 - 我不在乎，而不是找到这个元素随时。这只是我想要的。

Answer 1

您正在函数中查找$(this)，您应该使用jQuery创建一个单击处理程序，例如：

$("#panel .channel").click(function() {
    var foundChannel = $(this); //This DOES work
});

Answer 2

selected是<option>代码的属性。所以我认为它不适用于<pre>标签。

您应该使用其他内容，例如data-selected。

var prevSelectedChannel = $('[data-selected="true"]');
//...
foundChannel.attr("data-selected", "true");
//...
prevSelectedChannel.attr("data-selected", "false");

Answer 3

你可以使用它。

$(function(){
    var $channels = $('pre.channel');
    var onSelectChannel = function(){
        $(this).addClass('selected');
        $channels.not(this).removeClass('selected');
    };   
    $('#panel').on('click', 'pre.channel', onSelectChannel)
});

JSFIDDLE

要查找所选项目，请使用：

var $selected = $('pre.selected');

Answer 4

如果使用.prop() jQuery方法更新属性，则需要过滤元素集。在这种情况下，您无法使用属性选择器。

--DEMO--

function onSelectChannel() {
    // callback
    var foundChannel = $(this);
    var prevSelectedChannel = $(".channel").not(this).filter(function () {
        return this.selected
    });

    if (foundChannel.length > 0) {
        foundChannel.css('background-color', selectedChannelColor);
        foundChannel.prop("selected", true);

        if (prevSelectedChannel.size() > 0) {
            prevSelectedChannel.css('background-color', channelsColor);
            prevSelectedChannel.prop("selected", false);
        }
    }
}

Answer 5

$(this)对象在您的情况下没有任何内容，因为它在单独的模块中使用，$(this)的范围为空。

但如果$(this)位于像这样的点击事件处理程序中，那么同样会有效。

          $('<selector>').on('click',function (){
                   $(this);//refers to the current object/element which triggered click event  
           });

因此，不要在事件处理程序之外定义onSelectChannel()，而是在事件处理程序本身中将其更好地定义为匿名函数。

快乐编码：）

财产的设置不起作用

5 个答案:

--DEMO--