Question

我有多个div，因此我想这样做，因此当用户单击一个选项（A，B，C，D）时，此divs类便添加到了滚动条中，因此我可以定位滚动条CSS颜色

我创建了以下代码库，我想获取已单击的任何类，例如colour3，然后将“ colour3”作为ID或类别添加到滚轮横幅div。

笔-https://codepen.io/scottYg55/pen/WNNgxWZ

$(".changecolours > div").on('click', function() {
  var colourChange = this.value;
  $('.roller-banner').attr('class', colourChange);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changecolours">
  <div class="colour1">A</div>
  <div class="colour2">B</div>
  <div class="colour3">C</div>
  <div class="colour4">D</div>
</div>

<div class="roller-banner">
  <img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/roller-banner-nodetails.png" class="static">

  <div class="halft-colour"></div>
  <div class="halfb-colour"></div>

  <div class="dlogo">
    <img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/select-dropbox.png" />
  </div>

  <div class="instertxt">
    <div id="yourtextlive"></div>
  </div>

  <div class="dpimg">
    <img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/banner-insert-img.png" />
  </div>

  <div class="dplink">
    dropbox.com
  </div>

</div>
</div>

Answer 1

第一个问题是您要单击的div-没有属性value。最好将“颜色”存储为数据属性。

您还可以将此选择存储在roller-banner元素上，从而在选择其他类时可以轻松删除该类。

$(".changecolours > div").on('click', function() {
  var colourChange = $(this).data("color");
  $('.roller-banner').removeClass(function(){ return $(this).data("selected-color")})
                     .data("selected-color",colourChange)
                     .addClass(colourChange);
});

.colour1{ background-color:red}
.colour2{ background-color:green}
.colour3{ background-color:orange}
.colour4{ background-color:blue}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changecolours">
  <div data-color="colour1">A</div>
  <div data-color="colour2">B</div>
  <div data-color="colour3">C</div>
  <div data-color="colour4">D</div>
</div>

<div class="roller-banner">
  <img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/roller-banner-nodetails.png" class="static">

  <div class="halft-colour"></div>
  <div class="halfb-colour"></div>

  <div class="dlogo">
    <img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/select-dropbox.png" />
  </div>

  <div class="instertxt">
    <div id="yourtextlive"></div>
  </div>

  <div class="dpimg">
    <img src="http://www.project-progress.co.uk/dropbox/global/wp-content/uploads/2019/11/banner-insert-img.png" />
  </div>

  <div class="dplink">
    dropbox.com
  </div>

</div>
</div>

动态添加class / id onclick

1 个答案: