javascript - 根据文本更改更改背景颜色

Question

我需要根据文本更改更改 $('.category-edit .type') 的背景颜色。我从 $('.organisation-options .organisation-option') 获取文本并将其设置为 $('.category-edit .type')。我只需要当用户点击“酒店”时，例如 $('.category-edit .type') 的 div 将文本更改为酒店，背景颜色也更改为

$('.organisation-options .organisation-option').on("click", function(){

      $(this).addClass('active').siblings().removeClass('active');

      $('.category-edit .type').text($(this).text());

    })

<div class="organisation-options">
 <div class="organisation-option">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="32" viewBox="0 0 44 30">
  <defs>
  <path id="t70za" d="M4848.156 965.136c0-3.389 2.77-6.136 6.188-6.136 3.417 0 6.187 2.747 6.187 6.136 0 3.39-2.77 6.137-6.187 6.137-3.418 0-6.188-2.748-6.188-6.137zm27.844 22.5a1.37 1.37 0 0 1-1.375 1.364h-41.25a1.37 1.37 0 0 1-1.375-1.364 1.37 1.37 0 0 1 1.375-1.363h41.25c.76 0 1.375.61 1.375 1.363zm-31.625-6.818c.013-4.513 3.7-8.168 8.25-8.182h3.781c4.551.014 8.237 3.669 8.25 8.182v4.091h-20.28zm16.789-13.599c0-3.033 2.48-5.492 5.538-5.492 3.058 0 5.537 2.46 5.537 5.492 0 3.034-2.479 5.492-5.537 5.492-3.059 0-5.538-2.458-5.538-5.492zm7.383 6.71c4.071.012 7.367 3.282 7.381 7.319v2.297a1.37 1.37 0 0 1-1.375 1.364h-8.178v-5.454c0-1.674-.86-3.232-1.736-4.531a.633.633 0 0 1 .512-.996zm-33.164-6.71c0-3.033 2.479-5.492 5.537-5.492 3.059 0 5.538 2.46 5.538 5.492 0 3.034-2.48 5.492-5.538 5.492-3.058 0-5.537-2.458-5.537-5.492zM4832 983.545v-2.297c.011-4.039 3.308-7.31 7.38-7.323h3.386c.352 0 .704.025 1.052.075a.678.678 0 0 1 .488 1.05c-.825 1.272-1.65 2.785-1.65 4.405v5.454h-9.281a1.37 1.37 0 0 1-1.375-1.364z"></path>
</defs>
  <g>
  <g transform="translate(-4832 -959)">
  <use fill="#769998" xlink:href="#t70za"></use>
  </g>
  </g>
  </svg>
  <span>Event agency</span>
 </div>
</div>

<div class="buttons category-edit">
  <div class="type" id="typeChanges">DMC</div>
</div>

Answer 1

有几种方法可以做到这一点。您也许可以通过使用数组或添加类来更改 jquery 中的样式 - 取决于您有多少元素，以及您想要多少种颜色...

我在下面的代码片段中使用了一个数组(每个都使用了不同的颜色)

$('.organisation-options .organisation-option').on("click", function() {

  $(this).addClass('active').siblings().removeClass('active');
  var myArr1 = ["Apple", "Pear", "Banana", "Avocado" , "Tomato"];
  var myArr2 =['#336633', '#000055', "#005533", "#22FF33" , '#005500'];
  var myval = $(this).text();
  var index = myArr1.indexOf(myval);


  $('.category-edit .type').text(myval);

  if (myArr1.includes(myval)) {
    $('.type').css('background-color',  myArr2[index]);
  } else {
    $('.type').css('background-color', 'yellow');
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="organisation-options">
  <li class="organisation-option">Apple</li>
  <li class="organisation-option">Pear</li>
  <li class="organisation-option">Banana</li>
  <li class="organisation-option">Avocado</li>
  <li class="organisation-option">Tomato</li>
</ul>
<div class="category-edit">
  <div class="type">&nbsp;</div>
</div>