Question

我有以下div层。有没有办法使用jQuery点击功能根据点击次数将背景颜色更改为某种颜色？

此外，div层也会有一个唯一的id，也许可以将点击次数/索引号的值放入div当前所说的Click Count？

    .box {
        width:44px;
        height:44px;
        line-height:44px;
        border:1px solid #808080;
        border-radius:8px;
        text-align:center;
        color:#000;
        font-weight:bold;
        font-size:24px; 
        font-family:Arial, Helvetica, sans-serif;
        cursor:context-menu;
    }


<div class="box" id="1001" style="background-color:#f4e8e8;" data-colors="#f4e8e8,#ed5151,#e0e554,#3ed179,#227ce3" data-index="0">
Click Count
</div>

因此，如果数据索引是0，那么第一次点击会将div的颜色更改为＃ed5151

如果数据索引已设置为1，则第一个单击颜色为＃e0e554，依此类推。

有关jQuery如何实现这一点的任何想法？

另外，我忘了提及，当它到达最后一个索引和颜色时，它需要循环回0并且颜色代表0

非常感谢

Answer 1

在更多CSS方法中，您可以通过[data-index]选择器定义颜色规则，只需更改点击索引：

$('.el').on('click', function() {

  var index = parseInt($(this).attr('data-index'));
  index = index == 4 ? 0 : index + 1;
  $(this).attr('data-index', index);

});

.el {
  width: 30px;
  height: 30px;
  margin: 5px;
}
[data-index='0'] {
  background-color: #f4e8e8;
}
[data-index='1'] {
  background-color: #ed5151;
}
[data-index='2'] {
  background-color: #e0e554;
}
[data-index='3'] {
  background-color: #3ed179;
}
[data-index='4'] {
  background-color: #227ce3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el" data-index="0"></div>
<div class="el" data-index="0"></div>
<div class="el" data-index="0"></div>

Answer 2

$(".box").click(function(){
  $this = $(this);
  var colors = $this.attr("data-colors").split(",");
  var index = parseInt($this.attr("data-index"));
  if (index >= colors.length) index = 0;
  $this.attr("data-index",index+1);
  $this.html(index+1);
  $this.css("background-color",colors[index]);
});

我已经让你有点JSFiddle：

修改新JSFiddle：

Answer 3

由于这被同行评审拒绝，我正在延长@ GOB的答案;

您还可以在点击功能中更改文本以显示DIV内的计数/索引;

$(".box").click(function(){
  $this = $(this);

  var colors = $this.attr("data-colors").split(",");
  var maxIndex = colors.length - 1;
  var index = parseInt($this.attr("data-index"));

  if (index == parseInt(maxIndex)) { 
    $this.attr("data-index", 0); 
  } else { 
    $this.attr("data-index", index + 1)
  }

  $this.css("background-color",colors[index]);
  $this.html(index);
});

评论中提到的要求2次点击是因为默认背景颜色与第一个索引相同。

这是一个最新的JS-Fiddle完全符合您的要求。

https://jsfiddle.net/JokerDan/cqjfcnqx/

修改第二个JSFiddle示例，将当前背景与下一个索引进行比较，以停止更改颜色所需的2次点击。

https://jsfiddle.net/JokerDan/cqjfcnqx/1/

Answer 4

$(document).on("click", "div.box", function () {

    $this = $(this);
    var arrColors = $this.attr("data-colors").split(",");
    var intCurrentIndex = parseInt($this.data("index"));
    var intNewIndex = intCurrentIndex == arrColors.length - 1 ? 0 : intCurrentIndex + 1;
    $this.css("background-color", arrColors[intNewIndex])
            .data("index", intNewIndex)
            .text("Click Count : " + intNewIndex);

});

.box
{

    line-height:44px;
    border:1px solid #808080;
    border-radius:8px;
    text-align:center;
    color:#000;
    font-weight:bold;
    font-size:24px;
    font-family:Arial, Helvetica, sans-serif;
    cursor:context-menu;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="1001" style="background-color:#f4e8e8;" data-colors="#f4e8e8,#ed5151,#e0e554,#3ed179,#227ce3" data-index="0">
    Click Count : 0
</div>
<div class="box" id="1002" style="background-color:#f4e8e8;" data-colors="#f4e8e8,#ed5151,#e0e554,#3ed179,#227ce3" data-index="0">
    Click Count : 0
</div>
<div class="box" id="1003" style="background-color:#f4e8e8;" data-colors="#f4e8e8,#ed5151,#e0e554,#3ed179,#227ce3" data-index="0">
    Click Count : 0
</div>
<div class="box" id="1004" style="background-color:#f4e8e8;" data-colors="#f4e8e8,#ed5151,#e0e554,#3ed179,#227ce3" data-index="0">
    Click Count : 0
</div>

Answer 5

这是我的尝试：

$(document).ready(function(){
$('.box').html('0');
$('.box').click(function(){
    var intIndex = parseInt($(this).attr('data-index'));
  var colors = $(this).attr('data-colors').split(',');

  if (intIndex >= colors.length) {
    intIndex = 0;
    $(this).attr('data-index', '0');
  }

  $(this).css('backgroundColor', colors[intIndex]);
  $(this).attr('data-index', intIndex + 1)

  $(this).html(parseInt($(this).html()) + 1)
});
});

您可以在此处看到它：https://jsfiddle.net/9g333e8k/1/

jQuery从数据变量切换div背景

5 个答案: