Question

我有三个按钮，按钮1＆amp;按钮2＆amp;按钮3 。我的要求是，如果单击按钮2，则应使用 onclick事件更改背景颜色。我尝试过，但我无法做到这一点。如果单击按钮2，则按钮1颜色正在变化。如果单击按钮3，则按钮1的颜色会发生变化。

＆＃13;

var count = 1;
    function setColor(btn, color) {
     var btn = 'button';
     var color = '#101010';
    	
        var property = document.getElementById(btn);
        if (count == 0) {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "red"
            count = 0;
        }
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" id="button" onclick="setColor()">Button 1</button>
<button type="button" id="button" onclick="setColor()">Button 2</button>
<button type="button" id="button" onclick="setColor()">Button 3</button>

＆＃13;

我的更新代码

 $.ajax({
 type: "POST",
 data: {city:city,locality:locality},
  url: "rentlocalityFilter.php",
 success:function(data){

   var htmlString='';
          $.each( res['data'], function( key, value ) {
           var id = value.id;
           htmlString +='<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: red;" id="button" id="button" onclick="setColor('+value.id+')"></i></a>';

        });

 }

 });


var count = 1;
function setColor() {
 var btn = 'button';
 var color = '#101010';

    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "red"
        count = 0;
    }
    }

Answer 1

Html页面上的ID必须是唯一的。

你需要做的就是给出ID：

<button type="button" id="button1" onclick="setColor('button1')">Button 1</button>
<button type="button" id="button2" onclick="setColor('button2')">Button 2</button>
<button type="button" id="button3" onclick="setColor('button3')">Button 3</button>

并更改您的javascript代码：

var count = 1;
function setColor(_btn, color) {
 var btn = _btn;
 var color = '#101010';

    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "red"
        count = 0;
    }
}

Answer 2

试试这个，

<button onclick="setColor(this)">Button 1</button>
<button onclick="setColor(this)">Button 2</button>
<button onclick="setColor(this)">Button 3</button>

var count = 1;
function setColor(btn) {
    var color = '#101010';
    // doesn't need getElementById anymore, use btn directly because we gave 'this'
    if (count == 0) {
        btn.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        btn.style.backgroundColor = "red"
        count = 0;
    }
}

jsfiddle

编辑1：

您的上次更新有意义，但仍然不足以制定解决方案，因为我们仍然不了解value，我可以说您也应该像这样给我，id="'+value.id+'" onclick="setColor('+value.id+')或者您可以删除此行并使用jquery

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

var count = 1;
$(document).ready(function() {
  $("button").click(function() {
    var btn = $(this); 
    var color = '#101010';
    if (count == 0) {
      btn.css("backgroundColor", "#FFFFFF");
      count = 1;
    } else {
      btn.css("backgroundColor", "red");
      count = 0;
    }
  });
});

jquery solution

希望有所帮助，

Answer 3

你可以像这样做

var count = 1;
    function setColor(btn) {

     var color = '#101010';
        var butn = document.getElementById(btn);
        if (count == 0) {
            butn.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            butn.style.backgroundColor = "red"
            count = 0;
        }
    }

您还需要在id属性

中传递value.id

htmlString +='<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer"> <i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: #8bc34a;" id="'+value.id+'" onclick="setColor('+value.id+')"></i></a>'

Answer 4

看一下这个例子，工作正常并且代码较少。只需将单击的元素传递给函数，使用toggleClass即可更改背景颜色。
http://api.jquery.com/toggleclass/

＆＃13;

   
    function setColor(elem) {
     $(elem).toggleClass('active')


    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button"  id="button1" onclick="setColor(this)">Button 1</button>
<button type="button" id="button2" onclick="setColor(this)">Button 2</button>
<button type="button" id="button3" onclick="setColor(this)">Button 3</button>
<style>.active{background-color:red}</style>

＆＃13;

Answer 5

这样的Html代码：

<button type="button" id="button1" onclick="setColor('button1')">Button 1</button>
<button type="button" id="button2" onclick="setColor('button2')">Button 2</button>
<button type="button" id="button3" onclick="setColor('button3')">Button 3</button>

这样的JavaScript代码：

var count = 1;
function setColor(btnId) {

 var color = '#101010';

    if (count == 0) {
        btnId.style.backgroundColor = "#FFFFFF";
        count = 1;        
    }
    else {
        btnId.style.backgroundColor = "red";
        count = 0;
    }
}

我希望能帮助你。

单击jquery事件按钮颜色不变

5 个答案:

编辑1：