Question

我创建了两个带有文本的按钮。这样用户可以选择喜欢还是不喜欢它。例如，文本可以是“好车”，并且与此类似（两个按钮）。如果用户单击like button，则like按钮变为灰色（默认情况下为绿色），现在，如果用户选择了不相同的按钮，则单击like时，like按钮应自动变为默认状态。因为不应同时选择两个按钮。我不知道如何在html / javascript / jquery等中执行此操作。请帮忙。

代码是：

<span class="tags">Good Car  <i id="b1" onclick="myfunc(this)" 
class="thumbsup fa fa-thumbs-up" ></i> <i onclick="myfunc1(this)" 
class="thumbsdown fa fa-thumbs-down"></i></span>


<script>
function myfunc(x)
{


    if (x.style.color==="green") 
    {
        x.style.color="grey"
    }
    else
    {
        x.style.color="green"
    }
}

function myfunc1(x)
{


    if (x.style.color==="red") 
    {
        x.style.color="grey"
    }
    else
    {
        x.style.color="red"
    }

}
</script>

Answer 1

[
  {
    "values": [
      "JOSÉ", //customer name
      "3", //number of sale
      "PENDING", //installment status (of this sale)
      40, //installment value (of this sale) (This was the result of summing all installment values)
      "COMMITTED", //sale status
      400 //total sale (This was the result of summing all total sale values)
    ]
  }
]

使用jQuery并且没有id的替代解决方案是。

<!-- give an id to both buttons -->
<span class="tags">Good Car <i id="b1" onclick="myfunc(this)" class="thumbsup fa fa-thumbs-up" ></i> <i id="b2" onclick="myfunc1(this)" class="thumbsdown fa fa-thumbs-down"></i></span>

<script>
  function myfunc(x) {
    if (x.style.color === "green") {
      x.style.color = "grey";
      document.getElementById("b2").style.color = "red"; // get the other button and set its color
    } else {
      x.style.color = "green";
    }
  }

  function myfunc1(x) {
    if (x.style.color === "red") {
      x.style.color = "grey";
      document.getElementById("b1").style.color = "green"; // get the other button and set its color
    } else {
      x.style.color = "red";
    }
  }
</script>

Answer 2

执行此操作的简单方法是在CSS中设置默认的灰色状态。然后，您可以在单击图标以设置其自己的颜色时，在图标中添加或删除类。这样，UI逻辑就与JS分离了。

还要注意，您不应该使用on*事件属性。应尽可能避免使用它们。改用不显眼的事件处理程序。要从同级图标中删除该类，可以分别使用previousElementSibling和nextElementSibling。这是一个完整的工作示例：

var thumbs = document.querySelectorAll('.thumbsup, .thumbsdown');
Array.from(thumbs).forEach((thumb) =>
{
  thumb.addEventListener('click', function() {
    this.previousElementSibling && this.previousElementSibling.classList.remove('active');
    this.nextElementSibling && this.nextElementSibling.classList.remove('active');
    this.classList.toggle('active');
  });
});

.thumbsup,
.thumbsdown {
  color: grey;
}
.thumbsup.active {
  color: green;
}
.thumbsdown.active {
  color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="tags">
  Good Car  
  <i class="thumbsup fa fa-thumbs-up"></i> 
  <i class="thumbsdown fa fa-thumbs-down"></i>
</span><br />

<span class="tags">
  Foo Bar  
  <i class="thumbsup fa fa-thumbs-up"></i> 
  <i class="thumbsdown fa fa-thumbs-down"></i>
</span>

希望在用户单击时像按钮一样将按钮更改为默认状态，反之亦然

2 个答案: