1

我创建了两个带有文本的按钮。这样用户就可以选择喜欢或不喜欢它。例如，文本可以是“好车”，并且有喜欢和不喜欢（2 个按钮）。如果用户单击like button ，like button 变为灰色（默认为绿色），现在如果用户选择like button，则like button 应在单击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>
4

2 回答 2

0 
<!-- 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>

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

<span class="tags">Good Car  
<i class="green thumbsup fa fa-thumbs-up" ></i>
<i class="red thumbsdown fa fa-thumbs-down"></i>
</span>

<style>
.green {
  background-color: green;
}
.red {
  background-color: red;
}
.gray {
  background-color: gray;
}
</style>

<script>
$(document).ready(function() { // execute this code after page has loaded
    // register a click event listener for anything that has the class "green" or "red"
    $(document).on("click", ".green,.red", function() {
        if ($(this).hasClass("green")) { // if they clicked on the green button, see if it is NOT active
            if (!$(this).hasClass("gray")) {
                $(".red").removeClass("gray"); // we are going to become active, so turn off the other button (it might already be off, but that is ok)
            }
        } else { // must be red
            if (!$(this).hasClass("gray")) { // if they clicked on the red button, see if it is NOT active
                $(".green").removeClass("gray");// we are going to become active, so turn off the other button (it might already be off, but that is ok)
            }
        }
        $(this).toggleClass("gray"); // flip the active state of this button
    });
});
</script>
于 2018-08-09T18:55:29.050 回答
0

执行此操作的简单方法是在 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>

于 2018-08-09T19:06:32.873 回答