Повторяющаяся ID использует в JavaScript

Question

У меня есть следующие настройки:

<a href="#" id="A" >My Site</a> 
    <a href="#" id="A" >Your Site</a> 
    <a href="#" id="A" >Her site</a> 
    <a href="#" id="A" >His Site</a> 
    <a href="#" id="A" >Our Site</a> 

и кнопка:

<a href="#" id="B" >Yay</a> 

Тогда следующий JavaScript:

<script>       
    jQuery("#A").click(function() 
     { jQuery("#B").trigger('click');   
    return false;  });      
</script> 

В этой обстановке, когда " A ", затем нажимается" B ".

Это хорошо работает для самой первой кнопки («Мой сайт»). Однако другие кнопки не работают так, как будто только первый id был признан javascript, а остальные просто игнорируются.

Я имею в виду, я могу изменить id других кнопок и повторить javascript, однако это похоже на плохо написанную идею.

Что было бы лучшим способом справиться с этой ситуацией? (чистый и эффективный способ).

Кроме того, скажем, что у меня есть повторение javascript с различными id в качестве примера ниже (для разных кнопок для запуска различных кнопок).

<script>       
    jQuery("#A").click(function() 
     { jQuery("#B").trigger('click');   
    return false;  }); 

    jQuery("#C").click(function() 
     { jQuery("#D").trigger('click');   
    return false;  }); 

    jQuery("#E").click(function() 
     { jQuery("#F").trigger('click');   
    return false;  });      
</script> 

В этом случае, есть ли способ сконденсировать повторяющиеся javascripts?

Спасибо!

Answer 1

Ваш HTML является недействительным. Идентификатор должен быть уникальным. JS возьмет первый элемент с этим идентификатором и будет игнорировать элементы отдыха. Для этого используйте классы.

$(document).ready(function() { 
 
    $('.A').click(function(e) { 
 
    e.preventDefault(); 
 

 
    $('#B').trigger('click'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="A">My Site</a> 
 
<a href="#" class="A">Your Site</a> 
 
<a href="#" class="A">Her site</a> 
 
<a href="#" class="A">His Site</a> 
 
<a href="#" class="A">Our Site</a> 
 
<hr/> 
 
<button onClick="alert('Clicked B')" id="B">Maybe clicked</button>

---

Если вы должны сделать ссылку на то, что элемент должен быть щелкнул, и ваши ссылки не имеют какой-либо ссылки на другие страницы, вы можете использовать его href элемент:

$(document).ready(function() { 
 
    $('.A').click(function() { 
 
    $($(this).attr('href')).trigger('click'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#a" class="A">My Site</a> 
 
<a href="#b" class="A">Your Site</a> 
 
<a href="#a" class="A">Her site</a> 
 
<a href="#c" class="A">His Site</a> 
 
<a href="#a" class="A">Our Site</a> 
 
<hr/> 
 
<button onClick="alert('Clicked A')" id="a">Maybe A clicked</button> 
 
<button onClick="alert('Clicked B')" id="b">Maybe B clicked</button> 
 
<button onClick="alert('Clicked C')" id="c">Maybe C clicked</button>

Answer 2

Элемент id должен быть уникальным. Таким образом, я предложил бы использовать класс:

<a href="#" class="A" >My Site</a> 
<a href="#" class="A" >Your Site</a> 
<a href="#" class="A" >Her site</a> 
<a href="#" class="A" >His Site</a> 
<a href="#" class="A" >Our Site</a> 

Тогда:

elements = document.getElementsByClassName("A"); 
for(var i = 0; i < elements.length; i++){ 
    var ele = elements[i]; 
    jQuery(ele).click(function() 
     { jQuery("#B").trigger('click');   
     return false;  }); 
} 

Answer 3

ID элемента должен быть уникальным, так что вы можете использовать класс для группы сходных элементов, используйте атрибут data-*, чтобы указать, какие клик элемента должен быть активирован.

Уникальный идентификатор элемента.
В документе не должно быть нескольких элементов , имеющих одинаковое значение id.

<a href="#" class="click" data-target="a" >My Site</a> 
<a href="#" class="click" data-target="b">Your Site</a> 
<a href="#" class="click" data-target="c">Her site</a> 
<a href="#" class="click" data-target="d">His Site</a> 
<a href="#" class="click" data-target="e">Our Site</a> 


<a href="#" id="a" >Yay</a> 
<a href="#" id="b" >Yay</a> 
<a href="#" id="c" >Yay</a> 

затем

$('.click').click(function(){ 
    $('#' + $(this).data('target')).click(); 
}) 

Answer 4

В HTML ID должен быть уникальным, вы можете заключить все якоря внутри элемента блока и сделать, как следующим

<div id="A"> 
    <a href="#">My Site</a> 
    <a href="#">Your Site</a> 
    <a href="#">Her site</a> 
    <a href="#">His Site</a> 
    <a href="#">Our Site</a> 
    </div> 

Кнопка

<a href="#" id="B" >Yay</a> 

Script

<script>       
jQuery("#A a").click(function() 
    { 
    jQuery("#B").trigger('click');   
    return false;  
    });      
</script>