如何使用一个值(单击li时由.text()获取)作为隐藏某个div的选择器

Question

我有一个类似的列表

<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小时,但仍然在黑暗中.并提前感谢

Answer 1

您应该向所有#batch1,#batch2元素添加一个公共类，以便您可以一次性定位所有元素。

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

网页

<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/