Question

我正在开发一个UI，其中一些元素分为左右两组，点击后会突出显示，通过操作数据属性。

如果在点击第二个元素时突出显示了一个元素，则第一个＆＃34;点亮＆＃34;所以只有第二个有效果。

This是我到目前为止的地方：

＆＃13;

$( '#wrapper' ).on( 'click', '.box[data-selectable="1"]', function() {

	var $this = $( this );
  
  $this.attr( 'data-selected', ( $this.attr( 'data-selected' ) == '0' ? '1' : '0' ) );
  
	$( '.box' ).not( $this ).attr({
    'data-selected': '0',
    'data-selectable': '1'
  });
});

＆＃13;

body { margin: 2%; }

#wrapper { display: flex; }

.box {
  align-items: center;
  border: 1px solid #000;
  
  -webkit-box-shadow: none;
          box-shadow: none;
   
  display: flex;
  height: 150px;
  justify-content: center;
  margin: 20px 50px 40px 50px;
  
  -webkit-transition: box-shadow .5s linear;
       -o-transition: box-shadow .5s linear;
     -moz-transition: box-shadow .5s linear;
      -ms-transition: box-shadow .5s linear;
  -kthtml-transition: box-shadow .5s linear;
          transition: box-shadow .5s linear;

  width: 150px;
}

.box[data-selected="1"] {
    -webkit-box-shadow: -1px 0px 20px 16px rgba( 255, 0, 0, 0.8 );
            box-shadow: -1px 0px 20px 16px rgba( 255, 0, 0, 0.8 );

    -webkit-transition: box-shadow .5s linear;
         -o-transition: box-shadow .5s linear;
       -moz-transition: box-shadow .5s linear;
        -ms-transition: box-shadow .5s linear;
    -kthtml-transition: box-shadow .5s linear;
            transition: box-shadow .5s linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

  <div id="a">
    <div class="box" data-offset="1" data-selected="0" data-selectable="1">1</div>
    <div class="box" data-offset="2" data-selected="0" data-selectable="1">2</div>
  </div>
  
  <div id="b">
    <div class="box" data-offset="3" data-selected="0" data-selectable="0">3</div>
    <div class="box" data-offset="4" data-selected="0" data-selectable="0">4</div>
  </div>
</div>

＆＃13;

看起来不错，如果没有，因为当从第一组（列）中选择元素时，第二组的元素也可以（并且需要）被选中，因此当进行AJAX调用时，两个元素＆＃39;数据将被发送。

这是一个简单的规则，总是一个来自左侧，一个来自右侧。如果它有所帮助，那就把它想象成一个记忆游戏，只受列限制。

这就是我所困扰的地方，因为我不知道如何区分它们。

Answer 1

将它们分成2个独立的组（例如div），并为每个组启动jquery脚本。当你＆＃34;关灯时，请确保＆＃34;你是在你的小组范围内做的。你可以使用.parent（）来获取你的组元素而不是全局搜索（＆＃34; .box＆＃34;）：$this.parent().find( '.box' ).not( $this )或者你可以使用＆＃39; .siblings（）＆＃39; ：$this.siblings().not( $this )

https://jsfiddle.net/e5ykucte/3/

出于区分目的，您可以使用父组元素中的id属性。

$this.parent().attr('id')

https://jsfiddle.net/e5ykucte/4/

只需根据您的第一个组名添加条件（可能会有变化）：

 var currentGroup = $this.parent().attr('id');
  if (currentGroup == 'a' && $this.attr('data-selected') == "0") {
      $("div#b .box").attr({
        'data-selectable': '0',
        'data-selected': '0',
        });
  } else {
     $(".box").not( $this ).attr({
      'data-selectable': '1'
    });
  }

https://jsfiddle.net/e5ykucte/6/

切换课程，在小组内骑自行车

1 个答案: