jQuery的选择DIV

我有脚本，追加部分（DIV）到我的网页jQuery的选择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'); 
     });

但它无法正常工作。

来源

2011-10-07 Andriy Khrystyanovich

这个功能对我来说很好。也许你的div崩溃了，因此无法点击？使用Firebug或类似的工具来确保你的div占据你认为它的区域。 –

该脚本仅选择第一个块，并为其切换类，但不是下一个块。 –

好吧，如果你要添加大量的这些，那么你不想把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'); 

});

来源

2011-10-07 15:16:03 swatkins

我已经更新了我的答案 - 假设您每次只想要一个带有.selectedItem的项目。当你点击一个项目时，你从所有项目中删除'.selectedItem'类，然后添加你的项目。在这个小提琴中看到我更新的答案和实现：http://jsfiddle.net/swatkins/PGjPj/ – swatkins

我删除了id，这个例子像以前一样工作。但class'selectedItem'只能应用于一个div，现在我可以将它应用于多个div。当我选择一个div时 - 必须取消其他选项。这是怎么回事？ –

我已经更新了答案，将所有selectedItems恢复为初始状态，然后更改所选项目：更新小提琴：http://jsfiddle.net/swatkins/PGjPj/1/ – swatkins

试试这个：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'); 
});

来源

2011-10-07 15:15:26 Jack

出于性能原因，您应该使用.delegate（）而不是.live（），但请注意.on（）和.off（）函数： http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/ – biziclop

这个效果更好，谢谢！但是现在如何选择只有一个div。现在我可以选择所有的块。 –

出于性能原因，您可能想使用'delegate'而不是'live'。 –

jQuery的选择DIV

回答

相关问题