5

我有一个 ul li 列表，例如

<ul class="dropdown-menu" id="dropdown">
   <li><a id='l1' href='javascript:void(0);'>batch1</a></li>
   <li><a id='l2' href='javascript:void(0);'>batch2</a></li>
   <li><a id='l3' href='javascript:void(0);'>batch3</a></li>
   <li><a id='l4' href='javascript:void(0);'>batch4</a></li>
   <li><a id='l5' href='javascript:void(0);'>batch5</a></li>
   <li><a id='l6' href='javascript:void(0);'>batch6</a></li>
</ul>

现在，我可以获取每个 li 的文本值，问题是，我不能将文本值用作选择器。我想做的是：我有一些 div（id 是“batch1，batch2...batch6”），如果单击 li，我想隐藏它（单击 li 除外）。代码是=

html:

<div id="batch1"></div> 
<div id="batch2"></div> ......

jQuery：

$(document).ready(function(e) {
    $('body').click(function(event) {

    if($(event.target).is('#l1')) {
       var id = "'#"+$('#l2').text()+"'";
       $(id).hide();
    }
});
});

我应该怎么办。我正在尝试大约 24 小时，但仍然在黑暗中。并提前感谢

4

2 回答 2

3

您应该为所有元素添加一个公共类#batch1，以便您可以一次将它们全部定位。#batch2

然后使用 id 作为例外...

html

<div id="batch1" class="batch"></div>
<div id="batch2" class="batch"></div>

javascript

$('#dropdown').on('click','a', function(e){
    e.preventDefault();
    var id = '#' + $.trim( $(this).text() ); // create the id based on the text

    $('.batch').hide(); // hide all batch elements
    $(id).show(); // show the one that corresponds to the clicked li
});

演示在 http://jsfiddle.net/A5Vxm/

于 2012-06-07T11:20:08.950 回答
1 
$('body').click(function(event) {
    if(event.target.id  == 'l1' ) {
       var id = "#" + $.trim( $('#l2').text() );
       $(id).hide();
    }
});​

演示

但是，如果您的 div 是动态的，这意味着在页面加载后添加到 DOM 中，然后尝试

    $('body').on('click', 'a', function(event) {
        event.preventDefault();
        if(event.target.id  == 'l1' ) {
           var id = "#" + $.trim( $('#l2').text() );
           $(id).hide();
        }
    });​
于 2012-06-07T11:00:48.770 回答