Как выбрать этот элемент?

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» ссылку, я хочу, чтобы имитировать щелчок на Fisrt «LI» с триггером.

Но как это сделать? Я ищу триггеры, но в этом случае это сложно использовать.

Не могли бы вы помочь мне, пожалуйста?

Answer 1

Вы можете иметь обработчик щелчка, который может выбрать 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 и data-item соответствует

В качестве примера я просто предупредил значение данных. Если изменить элемент данных в "Тити" он предупредит 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>