Question

我有将部分（div）附加到我的页面

的脚本

$(document).ready(function () {
        var counter = 1;

        $('#AddSectionButton').click(function () {
            $('div#bottomLeftContent').append(
            '<div  id="section" class="listItem">' +
                '<table class="sectionTable">' +
                    '<tr>' +
                        '<td style="width: 20%; padding:0;">' +
                            '<p>' + counter + ':' + '</p>' +
                        '</td>' +
                        '<td style="width: 70%; padding:0;  ">' +
                            '<p>Label<p>' +
                        '</td>' +
                        '<td style="width: 10%">' +
                            '<img alt="" src="Images/noselected.png" class="selectImage" />' +
                        '</td>' +
                   '</tr>' +
                '</table>' +
         '</div>');

            counter++;


        });
});

我想只选择一个部分 - 当我点击它时，我想更改背景和src图像。并且只能选择一个部分。我怎么能这样做？

我尝试使用这样的东西：

$('.listItem').click(function () {
            $(this).toggleClass('selectedItem');
            //                $('#section').css('background-color', '#D7D7D7');
            //                $('#section > img').attr('src', 'Images/Selection.png');
        });

但它无法正常工作。

Answer 1

试试这个：http://api.jquery.com/live/

$('.listItem').live('click', function () {
            $(this).toggleClass('selectedItem');
            //                $('#section').css('background-color', '#D7D7D7');
            //                $('#section > img').attr('src', 'Images/Selection.png');
});

修改：

委托版本：

$('#bottomLeftContent').delegate('.listitem','click', function () { $(this).toggleClass('selectedItem'); });

Answer 2

好吧，如果您要添加其中的许多内容，那么您不希望将id="section"添加到添加的div中。这会在页面中添加许多相同的ID，而您不希望这样。该项目已经有了listItem类，您将其用于点击目标，因此您根本不需要ID - 将其删除。

$(document).ready(function () {
    var counter = 1;

    $('#AddSectionButton').click(function () {
        $('div#bottomLeftContent').append(
        '<div class="listItem">' +
            '<table class="sectionTable">' +
                '<tr>' +
                    '<td style="width: 20%; padding:0;">' +
                        '<p>' + counter + ':' + '</p>' +
                    '</td>' +
                    '<td style="width: 70%; padding:0;  ">' +
                        '<p>Label<p>' +
                    '</td>' +
                    '<td style="width: 10%">' +
                        '<img alt="" src="Images/noselected.png" class="selectImage" />' +
                    '</td>' +
               '</tr>' +
            '</table>' +
     '</div>');

        counter++;


    });
});

然后在.listItem点击处理程序中，您需要正确定位。试试这个：

$('.listItem').live('click', function () {

    // first revert any selected items back to initial state
    $('.selectedItem').css('background-color', '#FFFFFF');
    $('.selectedItem').find('img').attr('src', 'Images/noselected.png');
    $('.selectedItem').removeClass('selectedItem');

    // now mark the clicked item as selected
    $(this).toggleClass('selectedItem');
    $(this).css('background-color', '#D7D7D7');
    $(this).find('img').attr('src', 'Images/Selection.png');

});

jquery如何选择div

2 个答案: