如何select这个元素？

Question

我有以下代码：

<div class=myClass>
  <a href="#" id="click">Click for option Tata</a>
</div>

<div class="selectMultiContent">
 <ul class="selectMultiList library">
   <li data-value="517" class="">Tata</li>
   <li data-value="389" class="">Titi</li>
   <li data-value="387" class="">Toto</li
 </ul>
</div>

当我点击 'a' link 时，我想用触发器模拟点击第一个 'li'。

但是该怎么做呢？我想使用触发器，但在这种情况下似乎很难使用。

你能帮帮我吗？

Answer 1

您可以拥有一个点击处理程序，它可以 select li 基于其 data-value 属性，例如

$('#click').click(function(){
    $('.selectMultiList li[data-value="517"]').click()
})

Answer 2

调用JS方法即可：

<a href="javascript:clickOnOption(517)" id="click">Click for option Tata</a>

function clickOnOption(activeElement){
    $('.selectMultiList li[data-value="'+activeElement+'"]').click();
}

Answer 3

使用 jQuery 可以使它非常动态，只需确保 class 和数据项属性匹配

举个例子，我只是让它提醒数据值。如果您将数据项更改为 "titi" 它会提醒 389

示例：

$('.clicker').on('click', function (e) {
    $('.' + $(this).attr('data-item')).trigger('click');
});

$('.library li').on('click', function () {
    alert($(this).attr('data-value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
    <a href="#null" class="clicker" data-item="tata">Click for option Tata</a>
</div>
<div class="selectMultiContent">
    <ul class="selectMultiList library">
        <li data-value="517" class="tata">Tata</li>
        <li data-value="389" class="titi">Titi</li>
        <li data-value="387" class="toto">Toto</li>
    </ul>
</div>

如何select这个元素？

How select this element?

javascript

jquery

onclick

jquery-selectors