Question

我有这个div标签：

<div id="target-share">
<a href="#" title="" id="to-chosen" class="default"><span class="to-admin">Admin</span></a>
<ul id="select-shareto">
<li data-val="0-1">
<a href="#" title="" class="selected"><span class="to-Finance">Finance</span></a>
</li>
<li data-val="1-1">
<a href="#" title=""><span class="to-admin-private">Admin Private</span></a>
</li>
<li data-val="1-0">
<a href="#" title=""><span class="to-ceo">CEO</span></a>
</li>
<li data-val="0-0">
<a href="#" title=""><span class="to-ceo-private">CEO Private</span></a>
</li>                                    
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->

和这个JavaScript：

<script type="text/javascript">
$(document).ready(function($) {
        $('ul li').click(function() {
            $('input#shareto').val($(this).data('val'));
        });
    });
</script>

当我单独使用它时，JavaScript实际上有效。但是当我把它放在我的完整代码上时，JavaScript就不起作用了。我认为因为我的代码中有多个UL和LI标签。

现在，问题是......如何应用该Javascript以便它只能用于该div，即使有其他UL和LI标记。

Answer 1

请先使用此功能，而不是首先将div定位到其内容

$('#target-share ul li')

Answer 2

JavaScript（不仅仅是Jquery）是关于范围界定的：

$('ul li').click(function() {

导致click绑定到li中的每个ul，因此您要做的是将click范围缩小到您网页的特定区域或整个页面中的元素。

要将其范围限定为特定元素，最好的想法是使用如下ID：

$('#target-share ul li')

但是要将其范围限定为许多元素，最好使用类似的类：

$('.target-share ul li')

编辑：

同样on()可能是click的一个很好的替代品，但它取决于HTML的来源以及使用方式，但我想我会让你知道这个函数以防万一你还不知道它。

Answer 3

选择具有ul li属性的data-val：

$(function($) {
    $('ul li[data-val]').click(function() {
        $('input#shareto').val($(this).data('val'));
    });
});

如何为这个DIV做jQuery选择

3 个答案: