Question

我在网站上有一个订单。 HTML如下。

 <table class="variations">
    <div class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-
    one-color">
    <span class="swatch swatch-color swatch-green" data-
    value="green">Green</span>
    <span class="swatch swatch-color swatch-red " data-
    value="red">Red</span>
    <span class="swatch swatch-color swatch-yellow">Yellow</span>
  </div>
  <div class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-two-color">
    <span class="swatch swatch-color swatch-green" data-value="green">Green</span>
    <span class="swatch swatch-color swatch-red " data-value="red">Red</span>
    <span class="swatch swatch-color swatch-yellow">Yellow</span>
  </div>
  <div class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-three-color">
    <span class="swatch swatch-color swatch-green" data-value="green">Green</span>
    <span class="swatch swatch-color swatch-red " data-value="red">Red</span>
    <span class="swatch swatch-color swatch-yellow">Yellow</span>
  </div>
</table>

我正在使用一个逻辑，比如如果有人点击任何一个span项目，则隐藏下一个分区块中的相同span项目。如果再次单击使用，则隐藏元素必须可见。

这是一个T恤订单插件，我的目的是防止用户在每个T恤模型中选择相同的颜色。到目前为止，我做了以下代码，但它没有按预期工作。有人可以帮我解决这个问题。

$(document).ready(function(){

    $("[data-attribute_name='attribute_pa_t-shirt-one-color']").click(function(){
        function hidecolor() {
         var classes = ['swatch-green','swatch-red','swatch-yellow'];
         $('.' + classes.join(',.')).click(function(){
             var classNames = this.className.split(/\s+/);
             var colorcls;
             $.each(classNames, function(i, c) {
                 if( $.inArray(c, classes) !== -1 ) {
                     colorcls = c;
                     return false;

                 }
             });
                 var fclass = '.'+colorcls;
             //alert(fclass);
                 //$(fclass).hide();

                 $two = $("[data-attribute_name='attribute_pa_t-shirt-two-color']")
                 $three = $("[data-attribute_name='attribute_pa_t-shirt-three-color']")
                 $two.find(fclass).hide();
                 $three.find(fclass).hide();

         });
         }
    hidecolor();
    });

Answer 1

＆＃13;

$('.variations').on('click', '.swatch-color', function(){
  var $theSwatchClicked = $(this);
  var $swatchesWithTheSameColor = $('.variations').find('.swatch-'+ $theSwatchClicked.data('value'));

  if ($theSwatchClicked.is('.selected')) {
    $theSwatchClicked.removeClass('selected');
    $swatchesWithTheSameColor.removeClass('hide');
  } else {
    $theSwatchClicked.addClass('selected')
    $swatchesWithTheSameColor.not('.selected').addClass('hide');
  }
});

＆＃13;

.hide { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variations">
  <div class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-
    one-color">
    <span class="swatch swatch-color swatch-green" data-value="green">Green</span>
    <span class="swatch swatch-color swatch-red " data-value="red">Red</span>
    <span class="swatch swatch-color swatch-yellow" data-value="yellow">Yellow</span>
  </div>
  <div class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-two-color">
    <span class="swatch swatch-color swatch-green" data-value="green">Green</span>
    <span class="swatch swatch-color swatch-red " data-value="red">Red</span>
    <span class="swatch swatch-color swatch-yellow" data-value="yellow">Yellow</span>
  </div>
  <div class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-three-color">
    <span class="swatch swatch-color swatch-green" data-value="green">Green</span>
    <span class="swatch swatch-color swatch-red " data-value="red">Red</span>
    <span class="swatch swatch-color swatch-yellow" data-value="yellow">Yellow</span>
  </div>
</div>

＆＃13;

Answer 2

您的HTML无效：table代码无法将div作为子代，因此我添加了一些tr和td代码，以使其有效。

在事件处理程序中定义事件处理程序几乎总是一个坏主意。

获得所需效果的一个想法是检测您的点击发生在哪一行。这可以使用$(this).closest(".tawcvs-swatches").index()完成。它返回0,1或2。

然后你可以获得相同颜色的所有元素。只要您还为黄色$(".swatch-" + $(this).data('value'))元素添加data-value，就可以使用span。

使用这两条信息，您可以切割下面当前元素的元素。最后toggle将在可见和不可见之间切换。

以下代码实现了这个想法：

＆＃13;
＆＃13;
$('.variations .tawcvs-swatches .swatch').click(function () { var $match = $(".variations .tawcvs-swatches .swatch-" + $(this).data('value')) .slice($(this).closest(".tawcvs-swatches").index()+1); $match.toggle(!$match.is(':visible')); });
＆＃13;
td { border: 1px solid }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="variations"> <tr class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-one-color"> <td><span class="swatch swatch-color swatch-green" data-value="green">Green</span></td> <td><span class="swatch swatch-color swatch-red " data-value="red">Red</span></td> <td><span class="swatch swatch-color swatch-yellow" data-value="yellow">Yellow</span></td> </tr> <tr class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-two-color"> <td><span class="swatch swatch-color swatch-green" data-value="green">Green</span></td> <td><span class="swatch swatch-color swatch-red " data-value="red">Red</span></td> <td><span class="swatch swatch-color swatch-yellow" data-value="yellow">Yellow</span></td> </tr> <tr class="tawcvs-swatches" data-attribute_name="attribute_pa_t-shirt-three-color"> <td><span class="swatch swatch-color swatch-green" data-value="green">Green</span></td> <td><span class="swatch swatch-color swatch-red " data-value="red">Red</span></td> <td><span class="swatch swatch-color swatch-yellow" data-value="yellow">Yellow</span></td> </tr> </table>
＆＃13;
＆＃13;
＆＃13;

在jQuery中隐藏被点击元素的子元素

2 个答案: