Question

我有一个jQueryUI可排序的li-Buttons列表，带有以下标记：

<ol id="tracks" class="ui-sortable">
<li class="pl_clipEntry ui-widget-content ui-draggable ui-draggable-handle">
    <span class="pl_slot_1_clipNumber_6">6. </span>
    <span class="pl_clipName">
        <button class="pl_entry" onclick="emitCommand('goto: clip id: 6')">Clip Copy 3.mov</button>
    </span>
    <span class="pl_clipLength">(00min17sec)</span>
</li>
</ol>

这些项目是从另一个列表拖动的，其中的onclick有很好的用途现在，每当列表被排序（或插入新项目）时，我想覆盖onclick，以便此列表中的项目具有不同的功能（事实上，它将成为播放列表，＆＃ 39;为什么onclick-command与文件列表中的相同？

我无法弄清楚到底是怎么做到的。

每次列表更新都会调用它：

function updatePlaylist () {
    var list = $("#tracks");
    list.children(':not(.placeholder)').each(function(index) {
        console.log($(this).childNodes[1].text());  // to check if it works
        //$(this).children[1].attr("onclick","play_clip:" + index);
    });
};

所以，简单来说：我想设置每个li的onclick＆gt; span＆gt;按钮到＆＃34; play_clip6＆＃34;等

我已经尝试过与孩子[1]和子节点[1]，但它们都是未定义的。

我认为这是关于＆＃34;这个＆＃34;的范围，或者我忽略的其他一些事情......但这不应该起作用吗？我卡住了:( 感谢

Answer 1

我认为你缺少的是每个函数中引用元素的参数。

HTML

<ol id="tracks">
    <li>Track 1 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 1</span>

    </li>
    <li>Track 2 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 2</span>

    </li>
    <li>Track 3 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 3</span>

    </li>
    <li>Track 4 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 4</span>

    </li>
    <li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>

JS

$(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1);
        $(cElem).click(function () {
            alert("before: " + $(cElem).text());
        });
    });
});
$("#changeIt").click(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1);
        $(cElem).attr('onclick', '').unbind('click');
        $(cElem).click(function () {
            alert("after: " + $(cElem).text());
        });
    });
});

编辑以选择

中的按钮

HTML

<ol id="tracks">
    <li>Track 1 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 1</button></span>

    </li>
    <li>Track 2 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 2</button></span>

    </li>
    <li>Track 3 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 3</button></span>

    </li>
    <li>Track 4 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 4</button></span>

    </li>
    <li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>

JS

$(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1).children().eq(0);
        $(cElem).click(function () {
            alert("before: " + $(cElem).text());
        });
    });
});
$("#changeIt").click(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1).children().eq(0);
        $(cElem).attr('onclick', '').unbind('click');
        $(cElem).click(function () {
            alert("after: " + $(cElem).text());
        });
    });
});

更改<ol> </ol> </li>中每个<li>元素的onclick

1 个答案: