javascript - On Button Click - Change Span Content - More efficient way? - Stack Overflow

admin管理员组

文章数量:1418689

I am looking for some assistance and there must be a better way to code this. I have a series of buttons that change the same span Id and well I can get it to work but it seems like an excessive number of actions. Is there a way to make this more efficient? Any help would be appreciated. Thank you!

        jQuery("#All-Btn").click(function(event) {
            event.preventDefault();
            jQuery('#Type').html("red wine"); 
        });
        jQuery("#Awesome-Btn").click(function(event) {
            event.preventDefault();
            jQuery('#Type').html("Awesome"); 
        });

I am looking for some assistance and there must be a better way to code this. I have a series of buttons that change the same span Id and well I can get it to work but it seems like an excessive number of actions. Is there a way to make this more efficient? Any help would be appreciated. Thank you!

        jQuery("#All-Btn").click(function(event) {
            event.preventDefault();
            jQuery('#Type').html("red wine"); 
        });
        jQuery("#Awesome-Btn").click(function(event) {
            event.preventDefault();
            jQuery('#Type').html("Awesome"); 
        });

• javascript
• jquery

Share Improve this question Follow asked Dec 20, 2016 at 2:26 XeverusXeverus 12511 silver badge1313 bronze badges 3

• What exactly do you mean by "more efficient"? – Dekel Commented Dec 20, 2016 at 2:29
• 1 there are multiple ways. Best bet, data-attributes or switch/object based on id – epascarello Commented Dec 20, 2016 at 2:33
• Dekel, I am still real new to the programming world and I constantly find that while what I write works it is almost never the fastest, smallest, or more DOM efficient way. Just seeking out the best alternative to what I put above. Thanks! – Xeverus Commented Dec 20, 2016 at 2:35

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

You can use a custom function:

function myBtn(id, text) {
  $(id).click(function (e) {
    e.preventDefault();
    $('#Type').html(text);
  })
}

myBtn("#All-Btn", "red wine");
myBtn("#Awesome-Btn", "Awesome");

Well, provided you gave all your buttons a shared class and a data element you could reduce the logic as such.

<input type="button" id="All-Btn" class="typeButton" data-type="red wine">
<input type="button" id="Awesome-Btn" class="typeButton" data-type="some other value">

jQuery('.typeButton').on('click', function(e){
    e.preventDefault();
    jQuery('#Type').html(jQuery(this).data('type'));
}

Common Approach is using data attributes

$("[data-test]").on("click", function () {
    var text = $(this).data("test");
    $("#out").text(text);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-test="Red">Button 1</button>
<button data-test="Blue">Button 2</button>
<button data-test="Green">Button 3</button>

<div id="out"></div>

Another approach is a lookup

var text = {
  btn1 : "Red",  
  btn2 : "Green",  
  btn3 : "Blue",  
};

$(".btn").on("click", function () {
    var id = $(this).attr("id");
    $("#out").text(text[id]);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>

<div id="out"></div>

Or a switch

$(".btn").on("click", function () {
    var id = $(this).attr("id"), 
        text;
    switch (id) {
      case "btn1" :
          text = "Red";
           break;
      case "btn2" :
          text = "Green";
           break;
      case "btn3" :
          text = "Blue";
           break;
    }
    $("#out").text(text);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>

<div id="out"></div>

You could make object, with key-value pairs: Key is button id, value is span html, e.g:

buttons={
'All-Btn':'red wine',
'Awesome-Btn':'Awesome'
};

And then iterate through it:

$.each( buttons, function( key, value ) {
jQuery("#"+key).click(function(event) {
            event.preventDefault();
            jQuery('#Type').html(value); 
        });   
});   

buttons={
'All-Btn':'red wine',
'Awesome-Btn':'Awesome'
};

$.each( buttons, function( key, value ) {
jQuery("#"+key).click(function(event) {
            event.preventDefault();
            jQuery('#Type').html(value); 
        });   
});   

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="All-Btn">
fffff
</div>

<div id="Awesome-Btn">
fffffffffff
</div>
<span id="Type"></span>

However, you have to type... a lot, again. :)

You can store the text that you want to display as an attribute of the button (ex data-text). Then, you just need one function to handle the event

    jQuery("#All-Btn, #Awesome-Btn").click(function(event) {
        event.preventDefault();
        var text = jQuery(this).data('text');
        jQuery('#Type').html(text); 
    });

How about that?

The first way that came to mind was to use a data- attribute to specify the text associated with each button, and then bind a single, delegated click handler to handle clicks on all buttons with that attribute.

Notice that then your buttons don't need IDs.

$("body").on("click", "[data-text]", function() {
  $("#type").text($(this).attr("data-text"));
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="type">&nbsp;</span><br>
<button data-text="Awesome">Awesome</button>
<button data-text="Whatever">Something</button>
<button data-text="Greetings">Hello</button>
<button data-text="Fare well">Goodbye</button>
<button>This button does nothing because it has no data- attribute</button>

(I've bound the delegated click handler to the body, but the best practice is to bind it to the closest mon parent of the elements in question.)

本文标签： javascriptOn Button ClickChange Span ContentMore efficient wayStack Overflow