Изменить цвет фона на основе изменения текста

Question

Мне нужно изменить backgroundColor $('.category-edit .type') на основе изменения текста. я получаю текст от $('.organisation-options .organisation-option') и устанавливаю его на $('.category-edit .type'). просто мне нужно, когда пользователь нажимает на "hotel", например, div $('.category-edit .type') изменяет текст на hotel и backgroundColor также

$('.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>

Answer 2

Вам может понадобиться это

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

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

  // if old text is not same as new one, that is if text is changed, 
  if( $('.category-edit .type').text() !== $(this).text())
      $('.category-edit .type').css("background-color", "yellow");

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

})