Либо флажок не установлен, ИЛИ сценарий перестает продолжать - PullRequest
Новая
       9

Либо флажок не установлен, ИЛИ сценарий перестает продолжать

0 голосов
/ 08 мая 2020
  1. Я хочу, чтобы пользователь просто щелкнул строку, которая затем установит или снимет флажок.
  2. Я хочу, чтобы строка анимировалась и перемещалась вверх или вниз, чтобы отображались отмеченные элементы внизу списка.

Всё это прекрасно работает! : -)

Но когда я нажимаю фактический флажок, он не проверяется. Я пробовал использовать stopPropagation, но вместо этого он просто останавливает анимацию.

Я перепробовал множество вещей, но ничего не помогло. : - (

Что делать ??: /

Здесь вы можете увидеть демо: 

$(document).ready(function () {
	$('.row').click(function (){
		var checkbox = $(this).find('input[type=checkbox]');
		checkbox.prop("checked", !checkbox.prop("checked"));
		
		var upordown = checkbox.prop("checked");
		if(upordown){
			$( this ).slideUp(function() {$( this ).insertAfter( "#foo" );
  				$( this ).slideDown();
			   	});
			}
		else{
			
			$( this ).slideUp(function() {$( this ).insertBefore( "#foo" );
  				$( this ).slideDown();
				});
			}
	});
	
//	$('input[type=checkbox]').click(function (e)
//	{
//		e.stopPropagation();
//		return true;
//	});
	
});
.row {
	width: 300px;
	padding: 4px;
	margin: 2px;
  border:1px solid #666;
}
.left {
	float: left;
	width: 25px;
}
.clear {
	clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">Todo</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="1"/>
  </div>
  <div class="center">Item1</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="2"/>
  </div>
  <div class="center">Item2</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="4"/>
  </div>
  <div class="center">Item3</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="6"/>
  </div>
  <div class="center">Item4</div>
  <div class="clear"></div>
</div>
<div class="row">
  <div class="left">
    <input type="checkbox" value="11"/>
  </div>
  <div class="center">Item5</div>
  <div class="clear"></div>
</div>
<div class="row" id="foo" style="Display: none;"></div>

1 Ответ

1 голос
/ 08 мая 2020

Я подозреваю, что это проблема всплывающего события. Рассмотрим следующий код. 

$(function() {
  $(".row, input[type='checkbox']").click(function(e) {
    var row;
    if ($(e.target).is(".row")) {
      row = $(e.target);
    } else {
      row = $(e.target).closest(".row");
    }
    var checkbox = $('input[type=checkbox]', row);
    checkbox.prop("checked", !checkbox.prop("checked"));

    var up = checkbox.prop("checked");
    if (up) {
      row.slideUp(function() {
        row.insertAfter("#foo").slideDown();
      });
    } else {
      row.slideUp(function() {
        row.insertBefore("#foo").slideDown();
      });
    }
  });
});
.row {
  width: 300px;
  padding: 4px;
  margin: 2px;
  border: 1px solid #666;
}

.left {
  float: left;
  width: 25px;
}

.clear {
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-wrapper">
  <div class="row">Todo</div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="1" />
    </div>
    <div class="center">Item1</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="2" />
    </div>
    <div class="center">Item2</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="4" />
    </div>
    <div class="center">Item3</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="6" />
    </div>
    <div class="center">Item4</div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="left">
      <input type="checkbox" value="11" />
    </div>
    <div class="center">Item5</div>
    <div class="clear"></div>
  </div>
  <div class="row" id="foo" style="Display: none;"></div>
</div>

Это работает должным образом. Поскольку элемент row может не быть целью клика, мы можем решить его, чтобы убедиться, что мы выбрали правильный элемент.

...