Question

我还在学习jQuery并拥有以下代码：

$("#panel1 .button").click(function(){
      $("#q1").hide();
      $("#success1").show();
    });

    $("#panel2 .button").click(function(){
      $("#q2").hide();
      $("#success2").show();
    });

    $("#panel3 .button").click(function(){
      $("#q3").hide();
      $("#success3").show();
    });

它看起来多余，我想知道这是否可以使用$ this进行简化，或者如果有其他方法，我会很感激帮助。

谢谢！

Answer 1

我们可以通过标记更改删除重复的代码。

首先，让我们修改面板，使其具有公共类（'panel'）和HTML5数据属性：

<div class="panel" data-panelid="1">

根据需要重复其他两个面板。如果您愿意，我们可以保留唯一ID（id="panel1"等），但这个jQuery不需要它。

接下来，我们修改选择器以匹配每个面板中的按钮：

$(".panel .button").click(function(){

现在在点击处理程序中，我们可以检查数据属性并显示/隐藏正确的元素：

var panelId = $(this).data('panelid')
$("#q" + panelId).hide();
$("#success" + panelId).show();

现在我们已经删除了重复的代码，并且只为所有按钮使用了一个处理程序。完成的jQuery看起来像这样：

$(".panel .button").click(function(){
   var panelId = $(this).data('panelid')
   $("#q" + panelId).hide();
   $("#success" + panelId).show();
});

如何使用$ this

1 个答案: