Efficiently creating a multitude of jQuery functions using a single function

Question

Efficiently creating a multitude of jQuery functions using a single function

If you want to simplify the below jQuery functions, you can check out this code pen where they are showcased.

You can condense the JavaScript code by creating a function that handles all the functions below, with the only difference being the specific strings like name1, name2, name3, and so on.

Javascript

$('#name1').on('click', function(){
    document.getElementById("name1").innerHTML = "name1";
    });
$('#name2').on('click', function(){
    document.getElementById("name2").innerHTML = "name2";
    });
$('#name3').on('click', function(){
    document.getElementById("name3").innerHTML = "name3";
    });
$('#name4').on('click', function(){
    document.getElementById("name4").innerHTML = "name4";
    });
$('#name5').on('click', function(){
    document.getElementById("name5").innerHTML = "name5";
    });
$('#name6').on('click', function(){
    document.getElementById("name6").innerHTML = "name6";
    });

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button type="button" id="name1">NAME</button>
<button type="button" id="name2">NAME</button>
<button type="button" id="name3">NAME</button>
<button type="button" id="name4">NAME</button>
<button type="button" id="name5">NAME</button>
<button type="button" id="name6">NAME</button>

javascript jquery html css

Answer 1

Answer №1

Here is a simple solution that I think will work:

$('button').on('click', function() {
  $(this).html($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="name1">NAME</button>
<button type="button" id="name2">NAME</button>
<button type="button" id="name3">NAME</button>
<button type="button" id="name4">NAME</button>
<button type="button" id="name5">NAME</button>
<button type="button" id="name6">NAME</button>

If you only want this to apply to specific buttons, you can use $('#name1,#name2,#name3...').on.
If all the buttons have a specific class, you can use $('.specific-class').on.
If they are all contained within a specific element, you can use $('div#id1 button').on
And so on...

Answer 2

Here is a simple solution that I think will work:

$('button').on('click', function() {
  $(this).html($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="name1">NAME</button>
<button type="button" id="name2">NAME</button>
<button type="button" id="name3">NAME</button>
<button type="button" id="name4">NAME</button>
<button type="button" id="name5">NAME</button>
<button type="button" id="name6">NAME</button>

If you only want this to apply to specific buttons, you can use $('#name1,#name2,#name3...').on.
If all the buttons have a specific class, you can use $('.specific-class').on.
If they are all contained within a specific element, you can use $('div#id1 button').on
And so on...

Answer 3

Answer №2

If you want to simplify your code and target all the buttons on the page, try using a more general selector:

$('button').on('click', function(){
    //
});

Instead of setting the "currently clicked element" to its id value, you can make it more versatile:

$('button').on('click', function(){
    this.innerText = this.id;
});

However, if targeting every button is too broad, you can still specify a list of specific id values as selectors:

$('button[id^="name"]').on('click', function(){
    this.innerText = this.id;
});

Another approach could be:

$('#name1, #name2, #name3, #name4, #name5, #name6').on('click', function(){
    this.innerText = this.id;
});

In cases where there are many elements to target, consider assigning click handlers to a parent element instead of each individual element:

$(document).on('click', '#name1, #name2, #name3, #name4, #name5, #name6', function(){
    this.innerText = this.id;
});

This method involves assigning one handler function to the document and evaluating the target button elements dynamically when the handler is executed.

Answer 4

If you want to simplify your code and target all the buttons on the page, try using a more general selector:

$('button').on('click', function(){
    //
});

Instead of setting the "currently clicked element" to its id value, you can make it more versatile:

$('button').on('click', function(){
    this.innerText = this.id;
});

However, if targeting every button is too broad, you can still specify a list of specific id values as selectors:

$('button[id^="name"]').on('click', function(){
    this.innerText = this.id;
});

Another approach could be:

$('#name1, #name2, #name3, #name4, #name5, #name6').on('click', function(){
    this.innerText = this.id;
});

In cases where there are many elements to target, consider assigning click handlers to a parent element instead of each individual element:

$(document).on('click', '#name1, #name2, #name3, #name4, #name5, #name6', function(){
    this.innerText = this.id;
});

This method involves assigning one handler function to the document and evaluating the target button elements dynamically when the handler is executed.

Answer 5

Answer №3

Simplify your jQuery code in the following ways:

$('button[id^="name"]').on('click', function(){
    var id = $(this).attr("id"),
        num = id.replace("name", "");
    document.getElementById("name" + num).innerHTML = "name" + num;
});

Alternatively, you can achieve the same result using pure jQuery like this:

$('button[id^="name"]').on('click', function(){
    var button = $(this),
        id = button.attr("id");

    button.html("name" + id.replace("name", ""));
});

Answer 6

Simplify your jQuery code in the following ways:

$('button[id^="name"]').on('click', function(){
    var id = $(this).attr("id"),
        num = id.replace("name", "");
    document.getElementById("name" + num).innerHTML = "name" + num;
});

Alternatively, you can achieve the same result using pure jQuery like this:

$('button[id^="name"]').on('click', function(){
    var button = $(this),
        id = button.attr("id");

    button.html("name" + id.replace("name", ""));
});

Efficiently creating a multitude of jQuery functions using a single function

Answer №1

Answer №2

Answer №3

Similar questions

transmitting a JSON object to PHP with the help of jQuery

Retrieve data from multiple JSON tables using a JavaScript loop

how to halt page loading in CodeIgniter using jQuery and AJAX for bookmark functionality

Unattended vuejs prototype arrays are not being monitored

HTML5 elements for displaying search results

How can we convert a group of HTML elements sharing a common attribute into an array containing their respective values?

The context of the Nuxt.js3 plugin loses its definition

Utilizing jQuery to correspond with CSS media queries

Retrieve the Id value from a Kendo Hierarchical grid

"Can someone explain why my jQuery select function is continuously looping when

Would it be considered plagiarism to utilize a jquery plugin in a school assignment?

Using jQuery to wrap content in parentheses when a class is detected inside them

Unable to retrieve data from a textarea in order to update Mongodb using Express.js

Nodemon is not auto-reloading my server even after I have updated the code

Tips for including an HTML table in Rmarkdown

I'm having trouble getting my JavaScript code to run, can anyone offer any advice on what

Tips for preventing duplicate Java Script code within if statements

Updating a specific child element within an array in a MongoDB collection with Mongoose:

Ways to change the row height of the dropdown list according to the information in the second column?

Various HTML origins