Question

我有两个类似的功能执行类似的任务，但我不太确定如何最好地合并它们，因为我还是初学者......

小提琴显示了两个功能：
https://jsfiddle.net/umda6wn6/1/

moveDisks(1,'C','A','B')

CSS

moveDisks(1,'A','B','C')

JS

<div class="content">
  <div class="green button">
    <b>Button</b>
  </div>
  <div class="red button">
    <b>Button</b>
  </div>
  <div class="green gdiv">
    GREENGREENGREENGREEN
  </div>
  <div class="green gdiv">
    GREENGREENGREENGREEN
  </div>
  <div class="red rdiv">
    REDREDREDRED
  </div>
</div>

我想它看起来有点像这样

.button {
  color: white;
  background-color: green;
  width: 10%;
  display: inline-block;
  text-align: center;
  padding: 5px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.button:hover {
  cursor: pointer;
}

.buttonoff {
  background-color: gray;
}

但我不知道该怎么把'???'。当我要添加更多按钮时，我想要一种扩展它的方法，而不必为每个新按钮添加另一个功能......

Answer 1

如果您想知道点击了哪个按钮，可以这样查看其类：

$(document).ready(function() {
  $(".button").click(function() {
      //get classes of element as array
      //    index 0 would be red or green
      var classes = $( this ).prop('className').split(' ');
      //    get first letter of red/ green
      var firstletter = classes[0].substr( 0, 1 );
      $("." + firstletter + "div").toggle();
      $( "." + classes[0] ).toggleClass("buttonoff");
  });
});

在此处测试https://jsfiddle.net/8sbe48oa/

Answer 2

您可以创建一个从click事件调用的简单方法。在click事件函数中，关键字this将引用被单击的元素。我注意到你使用两个不同的类选择器引用相同的元素。为了简化您可以设置从下面的示例传入toggleBtn函数的click事件，它将在您的示例中调用与之前相同的元素上的jQuery.toggle和jQuery.toggleClass。

$(document).ready(function() {

    function toggleBtn() {
        var $this = $(this);
        $this.toggle();
        $this.toggleClass("buttonoff");
    }

    $(".gdiv").click(toggleBtn);
});

我希望这有用。

合并切换按钮的两个功能

2 个答案: