.addClass使用else if语句 - jQuery？

Question

我是JavaScript和jQuery的新手。按下这些颜色列表后，我想让顶部的白色按钮改变颜色。例如，按下粉红色按钮时，白色按钮变为粉红色，然后按下紫色按钮时，它变为紫色：

https://i.stack.imgur.com/q4zA0.png

当使用选择li元素的id和.addClass（）方法的函数按下粉红色按钮时，我设法让它工作。

//When clicking diff colours
$("ul").on("click", "li", function(){
    if ($("li").is("#p")) {
        $("button").addClass("pink");
    } else if ($("li").is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

但是，如果按下紫色按钮，则使用else似乎不起作用。

以下是HTML代码段：

<div id="colorSelect">
    <ul>
        <li class="pink" id="p"></li>
        <li class="purple" id="pu"></li>
        <li class="red" id="r"></li>
        <li class="blue" id="b"></li>
        <li class="green" id="g"></li>
        <li class="orange" id="o"></li>
    </ul>
</div>

Answer 1

//When clicking diff colours
$("ul").on("click", "li", function() {
  $("button").removeAttr('class').addClass($(this).attr('class'))
});

.white {
  background-color: white
}
.pink {
  background-color: pink
}
.purple {
  background-color: purple
}
.red {
  background-color: red
}
.blue {
  background-color: blue
}
.green {
  background-color: green
}
.orange {
  background-color: orange
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorSelect">
  <ul>
    <li class="pink" id="p">pink</li>
    <li class="purple" id="pu">purple</li>
    <li class="red" id="r">red</li>
    <li class="blue" id="b">blue</li>
    <li class="green" id="g">green</li>
    <li class="orange" id="o">orange</li>
  </ul>
</div>
<button>button</button>

假设li只有一个类

Answer 2

结果是预期的，因为var_dump($model->errors);die; 将始终评估为$('li').is("#p")，因为它将针对所有true元素而不是当前元素进行评估。

在评估时，您需要使用当前元素上下文，即li而不是this。

li

最好使用//When clicking diff colours $("ul").on("click", "li", function(){ if ($(this).is("#p")) { $("button").addClass("pink"); } else if (this).is("#pu")) { $("button").addClass("purple"); } color = $(this).css("background-color"); });

ID

Answer 3

那是因为你总是引用第一个li而不是压制的那个：

$("ul").on("click", "li", function(){
    if ($(this).is("#p")) {
        $("button").addClass("pink");
    } else if ($(this).is("#pu")) {
        $("button").addClass("purple");
    }
    color = $(this).css("background-color");
});

Answer 4

要解决此问题，您可以通过将单击元素的类直接应用于<button>来简化代码。这样就完全不需要if语句。试试这个：

//When clicking diff colours
$("ul").on("click", "li", function() {
  $('button').removeClass().addClass(this.className);
});

button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
}
.pink { background-color: pink; }
.purple { background-color: purple; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.orange { background-color: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button></button>

<div id="colorSelect">
  <ul>
    <li class="pink" id="p"></li>
    <li class="purple" id="pu"></li>
    <li class="red" id="r"></li>
    <li class="blue" id="b"></li>
    <li class="green" id="g"></li>
    <li class="orange" id="o"></li>
  </ul>
</div>