根据多个选择框删除/添加元素之间的类

时间：2017-11-06 09:12:39

标签： javascript jquery html

我正在构建一个比较表，该表使用多个选择框来选择要在表格中显示的产品。为了防止重复，我有一个jQuery代码，如果选择了重复的产品，它会在选择框之间切换。

默认情况下，包含产品的所有div都设置为display: none;

我希望移动显示类：compare-col-1，compare-col-2，compare-col-3 在div之间根据所有选择框中的选定选项显示它们。

这是CSS代码：

.product-col {
  display: none;
}

.compare-col-1 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  display: block;
}

.compare-col-2 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  display: block;
}

.compare-col-3 {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
  display: block;
}

我的HTML：

<div class="container p-4">
  <div class="row">
    <div class="col text-center">
      <select class="custom-select product-selector">
        <option value="product1" selected>Product 1</option>
        <option value="product2">Product 2</option>
        <option value="product3">Product 3</option>
        <option value="product4">Product 4</option>
        <option value="product5">Product 5</option>
        <option value="product6">Product 6</option>
        <option value="product7">Product 7</option>
        <option value="product8">Product 8</option>
      </select>
    </div>
    <div class="col text-center">
      <select class="custom-select product-selector">
        <option value="product1">Product 1</option>
        <option value="product2" selected>Product 2</option>
        <option value="product3">Product 3</option>
        <option value="product4">Product 4</option>
        <option value="product5">Product 5</option>
        <option value="product6">Product 6</option>
        <option value="product7">Product 7</option>
        <option value="product8">Product 8</option>
      </select>
    </div>
    <div class="col text-center">
      <select class="custom-select product-selector">
        <option value="product1">Product 1</option>
        <option value="product2">Product 2</option>
        <option value="product3" selected>Product 3</option>
        <option value="product4">Product 4</option>
        <option value="product5">Product 5</option>
        <option value="product6">Product 6</option>
        <option value="product7">Product 7</option>
        <option value="product8">Product 8</option>
      </select>
    </div>
  </div>
  <div class="row">
        <div id="product1" class="product-col col text-center compare-col-1">This is Product 1</div>
        <div id="product2" class="product-col col text-center compare-col-2">This is Product 2</div>
        <div id="product3" class="product-col col text-center compare-col-3">This is Product 3</div>
        <div id="product4" class="product-col col text-center">This is Product 4</div>
        <div id="product5" class="product-col col text-center">This is Product 5</div>
        <div id="product6" class="product-col col text-center">This is Product 6</div>
        <div id="product7" class="product-col col text-center">This is Product 7</div>
        <div id="product8" class="product-col col text-center">This is Product 8</div> 
  </div>
</div>

我的jQuery代码用于在选择框之间创建切换：

$(".product-selector").each(function(){
    $(this).data('__old', this.value);
}).change(function() {
    var $this = $(this), value = $this.val(), oldValue = $this.data('__old');

    $(".product-selector").not(this).filter(function(){
        return this.value == value;
    }).val(oldValue).data('__old', oldValue);

    $this.data('__old', value)
});

以下是CodePen，代码为：https://codepen.io/Cybergoat/pen/XzdZRa

我还没有找到解决问题的方法，我们非常感谢任何方向。

1 个答案:

答案 0 :(得分：1)

所以这就是你如何做到的：正如我在评论中所说，添加一个id可以识别显示所需行的列：

注意：您的系统放置元素似乎无法普遍使用（它不在当前的SO片段中），但您可以看到这些类在{{3}中添加得很好}

＆＃13;
＆＃13; 
$(".product-selector").each(function(){
    $(this).data('__old', this.value);
}).change(function() {
    var $this = $(this), value = $this.val(), oldValue = $this.data('__old'), col, dupe, dupeCol;
    
    dupe = $(".product-selector").not(this).filter(function(){
        return this.value == value;
    });
    if(dupe.length){
        dupe.val(oldValue).data('__old', oldValue);
        //identify the col
        dupeCol = dupe.attr('id').replace('product-col-', '');
        //remove class from old element
        $(".product-col").removeClass('compare-col-' + dupeCol);
        //set it to the new one
        $("#" + oldValue).addClass('compare-col-' + dupeCol);
    }
    
    //identify the col
    col = $this.attr('id').replace('product-col-', '')
    //remove class from old element
    $(".product-col").removeClass('compare-col-' + col);
    //set it to the new one
    $("#" + value).addClass('compare-col-' + col);
    
    $this.data('__old', value);
});
＆＃13; 
.product-col {
  display: none;
}

.compare-col-1 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  display: block;
}

.compare-col-2 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  display: block;
}

.compare-col-3 {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
  display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container p-4">
  <div class="row">
    <div class="col text-center">
      <select id="product-col-1" class="custom-select product-selector">
        <option value="product1" selected>Product 1</option>
        <option value="product2">Product 2</option>
        <option value="product3">Product 3</option>
        <option value="product4">Product 4</option>
        <option value="product5">Product 5</option>
        <option value="product6">Product 6</option>
        <option value="product7">Product 7</option>
        <option value="product8">Product 8</option>
      </select>
    </div>
    <div class="col text-center">
      <select id="product-col-2" class="custom-select product-selector">
        <option value="product1">Product 1</option>
        <option value="product2" selected>Product 2</option>
        <option value="product3">Product 3</option>
        <option value="product4">Product 4</option>
        <option value="product5">Product 5</option>
        <option value="product6">Product 6</option>
        <option value="product7">Product 7</option>
        <option value="product8">Product 8</option>
      </select>
    </div>
    <div class="col text-center">
      <select id="product-col-3" class="custom-select product-selector">
        <option value="product1">Product 1</option>
        <option value="product2">Product 2</option>
        <option value="product3" selected>Product 3</option>
        <option value="product4">Product 4</option>
        <option value="product5">Product 5</option>
        <option value="product6">Product 6</option>
        <option value="product7">Product 7</option>
        <option value="product8">Product 8</option>
      </select>
    </div>
  </div>
  <div class="row">
      <div id="product1" class="product-col col text-center compare-col-1">This is Product 1</div>
      <div id="product2" class="product-col col text-center compare-col-2">This is Product 2</div>
      <div id="product3" class="product-col col text-center compare-col-3">This is Product 3</div>
      <div id="product4" class="product-col col text-center">This is Product 4</div>
      <div id="product5" class="product-col col text-center">This is Product 5</div>
      <div id="product6" class="product-col col text-center">This is Product 6</div>
      <div id="product7" class="product-col col text-center">This is Product 7</div>
      <div id="product8" class="product-col col text-center">This is Product 8</div> 
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题