Please tell me how to write an event to click for another item. For example, for each digit there is an event per click with an alert of its value. How to make it so that when you click on point-1, for example, a click event on the corresponding figure occurs?

ul { list-style-type: none; } ul li { display: inline-block; background-color: black; } ul li a { color: #fff; padding: 10px; text-decoration: none; } 
 <div class="top-menu"> <ul> <li><a href="#">point-1</a></li> <li><a href="#">point-2</a></li> <li><a href="#">point-3</a></li> <li><a href="#">point-4</a></li> </ul> </div> <div class="bot-menu"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div>

  • one
    Please specify the question. It is not clear what needs to be done - Ilia Brykin
  • I apologize, did not even notice that the message was not sent. Gently so that when clicking on point-1, the same click on "1" in the bot-menu was processed. Well, by analogy with point-2. Those. you need the event that this click makes under certain conditions - Rick Hangover

2 answers 2

data attributes will work faster

 $( ".bot-menu a" ).on("click", function() { console.log("bot-menu: ", $(this).text()); }); $( ".top-menu a" ).on("click", function() { console.log("top-menu: ", $(this).text()); let index = $(this).text().split('-')[1]; $('.bot-menu a[data-id="' + index + '"]').trigger( "click" ); //$('.bot-menu:contains(index)'); //console.log($('.bot-menu a[data-id="' + index + '"]')); }); 
 ul { list-style-type: none; } ul li { display: inline-block; background-color: black; } ul li a { color: #fff; padding: 10px; text-decoration: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top-menu"> <ul> <li><a href="#">point-1</a></li> <li><a href="#">point-2</a></li> <li><a href="#">point-3</a></li> <li><a href="#">point-4</a></li> </ul> </div> <div class="bot-menu"> <ul> <li><a href="#" data-id="1">1</a></li> <li><a href="#" data-id="2">2</a></li> <li><a href="#" data-id="3">3</a></li> <li><a href="#" data-id="4">4</a></li> </ul> </div>

or without data attributes will work a little slower

 $( ".bot-menu a" ).on("click", function() { console.log("bot-menu: ", $(this).text()); }); $( ".top-menu a" ).on("click", function() { console.log("top-menu: ", $(this).text()); let index = $(this).text().split('-')[1]; $('.bot-menu a:contains(' + index + ')').trigger( "click" ); }); 
 ul { list-style-type: none; } ul li { display: inline-block; background-color: black; } ul li a { color: #fff; padding: 10px; text-decoration: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top-menu"> <ul> <li><a href="#">point-1</a></li> <li><a href="#">point-2</a></li> <li><a href="#">point-3</a></li> <li><a href="#">point-4</a></li> </ul> </div> <div class="bot-menu"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div>

  • 2
    It would be enough to simply use the index of the element that was clicked, without determining the number from the text) - DaemonHK
  • one
    @DaemonHK; It is not entirely reliable; using the index as a key is not a good practice. If it changes, the code may start to work incorrectly. And thanks for the comment)) - Ilia Brykin
  • one
    This is understandable) I just wrote a lightweight version just for this structure)) - DaemonHK

As one of the options, you need to set the data attributes on the elements in the upper and lower containers, and read them when you click in the upper container, and then in the closure of the "click" event, go through the bot-menu items and find an element that has the same data attribute and execute a software click on it.