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

您可以将要显示的文本存储为按钮的属性（ex 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，值是span 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); 
        });   
});

＆＃13;

buttons={
'All-Btn':'red wine',
'Awesome-Btn':'Awesome'
};

$.each( buttons, function( key, value ) {
jQuery("#"+key).click(function(event) {
            event.preventDefault();
            jQuery('#Type').html(value); 
        });   
});

＆＃13;

<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>

＆＃13;

然而，你必须再次打字...... ：）

Answer 5

首先想到的方法是使用data-属性来指定与每个按钮关联的文本，然后绑定一个委托的单击处理程序来处理具有该属性的所有按钮的点击。

请注意，您的按钮不需要ID。

＆＃13;

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

＆＃13;

<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>

＆＃13;

（我已将委派的点击处理程序绑定到body，但最佳做法是将其绑定到相关元素中最近的公共父级。）

Answer 6

Common Approach使用数据属性

＆＃13;

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

＆＃13;

<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>

＆＃13;

另一种方法是查找

＆＃13;

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

＆＃13;

<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>

＆＃13;

或开关

＆＃13;

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

＆＃13;

<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>

＆＃13;

按钮单击 - 更改跨度内容 - 更有效的方式？

6 个答案: