Using jQuery to capture the anchor ID when clicked, and then extracting content from an array using JavaScript

Question

Using jQuery to capture the anchor ID when clicked, and then extracting content from an array using JavaScript

My goal is to create an HTML anchor with a unique ID. When the user clicks the anchor, I want the ID to be passed to JavaScript using the onclick HTML attribute. Then, a JavaScript function will read the ID and display the corresponding content in a div. We are utilizing the jQuery library for this task.

This is what I have tried so far:

<a id="MyID1" onclick="var ClickVariable=this.id;return false">1</a>
<a id="MyID2" onclick="var ClickVariable=this.id;return false">2</a>

<script>
    var ClickVariable; 
    var ContentBox = []; 

                ContentBox[ClickVariable] = "Content for MyID1";

                $(ClickVariable).click(function() {
                $('.dropdown-menu-content').html(ContentBox);
            });   

    </script>

Unfortunately, the above code does not work as expected. We do have a working alternative solution, but it is not very efficient.

<a  id="MyID1">1</a>
<a  id="MyID2">2</a>

$('#MyID1').click(function() {
                    $('.dropdown-menu-content').html('Text 1');
                });
$('#MyID2').click(function() {
                    $('.dropdown-menu-content').html('Text 2');
                });

Although the above approach works, it involves a lot of repetition when dealing with a large list of elements.

Here is a link to a jsfiddle demonstrating the repetitive workaround: http://jsfiddle.net/2z7o5hn3/

javascript jquery html css onclick

Answer 1

Answer №1

If you want to avoid repeating code, you can use the same handler function for different elements:

//mapping id to text to display
var data = {
    'MyID1': 'Text 1',
    'MyID2': 'Text 2'
}

//shared click handler
var displayElement = $('.dropdown-menu-content');
function handleClick() {
    displayElement.html(data[this.id]);
} 

//assign click handler to each id
$.each(data, function(key, value) {
    $('#'+key).click(handleClick);
});

http://jsfiddle.net/8d6fy215/4/

Answer 2

If you want to avoid repeating code, you can use the same handler function for different elements:

//mapping id to text to display
var data = {
    'MyID1': 'Text 1',
    'MyID2': 'Text 2'
}

//shared click handler
var displayElement = $('.dropdown-menu-content');
function handleClick() {
    displayElement.html(data[this.id]);
} 

//assign click handler to each id
$.each(data, function(key, value) {
    $('#'+key).click(handleClick);
});

http://jsfiddle.net/8d6fy215/4/

Answer 3

Answer №2

Make sure to provide a class for all anchor tags and access them like this:

HTML:

<a id="link1" class="selectedLinks" href="#">Link 1</a>
<a id="link2" class="selectedLinks" href="#">Link 2</a>

JavaScript:

$('.selectedLinks').on('click', function(e){
  e.preventDefault();
  $('.content-area').html($(this).attr('id'));
})

Answer 4

Make sure to provide a class for all anchor tags and access them like this:

HTML:

<a id="link1" class="selectedLinks" href="#">Link 1</a>
<a id="link2" class="selectedLinks" href="#">Link 2</a>

JavaScript:

$('.selectedLinks').on('click', function(e){
  e.preventDefault();
  $('.content-area').html($(this).attr('id'));
})

Answer 5

Answer №3

Is this what you're looking for? => DEMO

var phrases=['Phrase 1','Phrase 2'];

$('a[class^=MyClass]').click(function() {
    $('.dropdown-list').html(phrases[$(this).text()-1]);
});

Answer 6

Is this what you're looking for? => DEMO

var phrases=['Phrase 1','Phrase 2'];

$('a[class^=MyClass]').click(function() {
    $('.dropdown-list').html(phrases[$(this).text()-1]);
});

Using jQuery to capture the anchor ID when clicked, and then extracting content from an array using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to create a div that resembles a dotted line?

Tips for emphasizing active tabs in Angular 6

The append method contains a function

Effective HTML element placement with CSS styling

Creating a safe and secure method to access social media by utilizing the user account profile of a third-party web application

Require assistance with a situation related to an MVC route after making a jQuery AJAX request to that route

Limiting the character count in a textarea can be achieved by implementing the 'jQuery InlineEdit' feature

Is there a way to set a custom background image for a specific Vaadin view?

Button for searching through the Bootstrap navigation bar

Restoring text boxes to their original styling

Vue: The async Apollo mixin function successfully logs a value, however it ultimately returns as undefined

I am experiencing excessive paper skipping in my printer

You can only remove one cart item at a time

Alter the browser's URI without having to reload the page

Tips for incorporating the Order By clause in intricate SQL queries to retrieve data with ASP

How can I choose an element based on its specific class using jQuery?

An error occurred when trying to initialize the module dx: [$injector:modulerr]. This was due to a bad directive name, 'DOMComponent', which is invalid

The footer covers the content when the content fills the entire screen

Passing the import name as a prop in React and combining it with the image src

Guide to using AJAX to send a select tag value to a PHP script on the current page