小编dan*_*nik的帖子

我在输入字段旁边有一个 SVG 图标。当图标或输入被悬停时，两者都应该一起改变颜色，当点击任何一个时，输入应该被聚焦并且都应该保持悬停颜色。

我遇到的问题是当输入聚焦时 SVG 不会保持悬停颜色。我试过使用，if ($('.input').is(':focus'))但它让我倒退了一步，因为它以某种方式阻止了颜色即使在悬停时也会改变。

JSFiddle - 取消对 JS 的注释以检查我徒劳的尝试。谢谢。

$(document).ready(function() {
  $('#current-amount-div').click(function() {
    $('.amount-input').focus();
  });

  /*if ($('.amount-input').is(":focus")) {
    $('.symbol-text').css({
      fill: '#3c93ae'
    });
  } else {
    $('.symbol-text').css({
      fill: '#6ab5cc'
    });
  }*/
});

#current-amount-div {
  width: 163px;
  display: block;
  margin: auto;
  transition: color 0.25s, fill 0.25s ease-in-out;
}

#current-amount-div:hover .amount-input {
  border-color: #3c93ae;
}

#current-amount-div:hover #oc-symbol text {
  fill: #3c93ae;
}

#oc-symbol {
  float: left;
}

#oc-symbol text {
  transition: fill 0.25s ease-out;
}

.symbol-text {
  fill: …

我在点击"添加产品"时尝试添加多个产品类别.我希望新产品选择框删除以前选择的产品类别.我第一次点击按钮时有这个工作,但它不会在第二次或第三次工作.谢谢参观.

的jsfiddle

HTML

<div id="products">
        <div id="product-row-1" class="row">
          <div class="small-6 columns">
            <select id="product-category-1" name="product-category-1" class="text">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
                <option value="d">d</option>
            </select>
          </div>

          <div class="small-6 columns">
            <input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
          </div>
        </div>
      </div>

      <div class="center row">
        <button id="add-product">Add item</button>
      </div>

JS

$(document).ready(function(){
    var num = 1;
    $('#add-product').click(function(){

      var selVal = $('#product-category-'+num+'').val(); 
      var clone = $('#product-row-'+num+'').clone();

      $('#products').append(clone);

      num++;

      clone.attr("id", '#product-row-'+num+'');
      clone.find('select').attr("id", 'product-category-'+num+'').attr("name", 'product-category-'+num+'');
      clone.find('input').attr("id", 'product-amount-'+num+'').attr("name", 'product-amount-'+num+'');

      $('#product-category-'+num+'').find("option[value='"+selVal+"']").remove();

      return false;
    });
  });