Question

第一：

是的，我搜索了谷歌。
是的，我搜索了这个网站（见附图）
我不确定要研究哪些具体文档，所以我做到了不这样做。但如果有人能告诉我我的位置，我很乐意这样做本来可以看。

现在已经不在了，这是我的问题。我有一些代码：

$('.button1').click(function() {
  $('.box').toggleClass('red');
});

$('.button2').click(function() {
  $('.box').toggleClass('black');
});

$('.button3').click(function() {
  $('.box').toggleClass('green');
});

以下是CodePen

问题： 如果没有为每个按钮设置单独的功能，是否可以实现相同的目标？我一直在寻找选择器一段时间，我觉得这是正确的道路，但我不确定他们是否会有所帮助。

目标一个完整的功能，为了清理我的代码...这将允许我点击任何按钮，但有不同的动作（说...应用不同的CSS类）。可能的？

Answer 1

一种可能的解决方案是在标记中添加其他信息，例如使用data - 属性：

＆＃13;

$('.button').click(function() {
  $('.box').toggleClass($(this).data('color'));
});

＆＃13;

* {
  margin: 0;
  text-align: center;
}

.box {
  margin: 0 auto;
  background: cornflowerblue;
  height: 100px;
  width: 100px;
  margin-top: 5vw;
}

button {
  border-radius: 2px;
  border: 0;
  background: cornflowerblue;
  font-size: 1.5vw;
  margin: 2vw;
  margin-top: 10vw;
}

.red {
  background: red;
}

.black {
  background: black;
}

.green {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<button class="button" data-color="red">Button 1</button>
<button class="button" data-color="black">Button 2</button>
<button class="button" data-color="green">Button 3</button>

＆＃13;

或者扩展您的选择器并根据点击的按钮设置颜色：

＆＃13;

$('.button1, .button2, .button3').click(function(e) {
  var color;

  switch ($(this).attr('class')) {
    case "button1":
      color = 'red';
      break;
    case "button2":
      color = 'black';
      break;
    case "button3":
      color = 'green';
      break;
  }

  $('.box').toggleClass(color);
});

＆＃13;

* {
  margin: 0;
  text-align: center;
}

.box {
  margin: 0 auto;
  background: cornflowerblue;
  height: 100px;
  width: 100px;
  margin-top: 5vw;
}

button {
  border-radius: 2px;
  border: 0;
  background: cornflowerblue;
  font-size: 1.5vw;
  margin: 2vw;
  margin-top: 10vw;
}

.red {
  background: red;
}

.black {
  background: black;
}

.green {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<button class="button1">Button 1</button>
<button class="button2">Button 2</button>
<button class="button3">Button 3</button>

＆＃13;

Answer 2

为所有3个按钮添加公共类，请参阅以下代码以供参考

$('.btncommon').click(function() {
    switch($(this).attr('id')){
        case "btn1":
          $('.box').toggleClass('red');
            break;
        case "btn2":
          $('.box').toggleClass('black');
            break;
        case "btn3":
          $('.box').toggleClass('green');
            break;
    }
});

Answer 3

除html属性和switch旁边的其他选项是使用纯CSS

$('.btncommon').click(function () {
    $(this).toggleClass('something');
});

的CSS：

.button1.something{
    background:red;
}
.button2.something{
    background:black;
}
.button3.something{
    background:green;
}

我个人更喜欢这个，因为它比浏览器的Javascript更快（但今天可能不那么重要）而且Javascript =更少维护。

当我构建组件（没有css文件）时，我更喜欢html属性选项。

是否可以在不重复代码的情况下触发不同的功能？

3 个答案: