單擊按鈕-更改跨度內容-更有效的方法？

Question

我正在尋找幫助，必須有更好的方法對此進行編碼。 我有一系列可以更改相同范圍ID的按鈕，我可以使其正常工作，但似乎動作過多。 有沒有辦法使它更有效？ 任何幫助，將不勝感激。 謝謝！

        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"); 
        });

Answer 1

您可以使用自定義函數：

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

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

Answer 2

好吧，只要為所有按鈕提供了一個共享類和一個數據元素，就可以減少這樣的邏輯。

<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'));
}

Answer 3

您可以將要顯示的文本存儲為按鈕的屬性（例如data-text ）。 然后，您只需要一個函數來處理事件

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

那個怎么樣？

Answer 4

您可以使用鍵值對創建對象：鍵是按鈕ID，值是跨度html，例如：

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

然后遍歷它：

$.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.com/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> 

但是，您必須再次輸入...。 :)

Answer 5

我想到的第一種方法是使用data-屬性指定與每個按鈕關聯的文本，然后綁定單個委派的單擊處理程序來處理具有該屬性的所有按鈕的單擊。

請注意，然后您的按鈕不需要ID。

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

 <script src="https://ajax.googleapis.com/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> 

（我已將委托的Click處理程序綁定到body ，但是最佳實踐是將其綁定到所討論元素的最接近的公共父級。）

Answer 6

通用方法是使用數據屬性

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

 <script src="https://ajax.googleapis.com/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> 

另一種方法是查找

 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.com/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> 

或開關

 $(".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.com/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>