Question

这是学校的作业。赋值的一部分是双击已在类中创建的div。当您双击它时，它应该被删除。

html有一个按钮，可以将div创建为类的实例。这工作得很好。然后我在div的类上放了一个双击事件监听器，在类方法上放了.remove（）（参见代码）。

但是当双击时，它会删除div和它之后的所有div。我相信这是因为所有的div都有相同的类名。

我可以在创建每个div时为其分配id并删除该特定div。我只是想知道是否有另一种方法可以抓住被点击的div。

我也试过用'this'来指代被点击的div。但是，我需要'this'来连接方法'this.removeOne'所以我使用了箭头函数。

以下代码的基础知识。所有细节都在这里：https://jsfiddle.net/ChristyCakes/8w0htt1s/

底线：我想双击一个div并只删除那一个div。是唯一的方式给它一个id？

这个问题与堆叠上的其他问题非常相似，但我在应用这种特殊情况的答案时遇到了麻烦 - 或者我需要更清楚的解释。

// create a class called Die
class Die {
  constructor(value) {

    // set value property
    this.value = value;

    // create a div for each new object, assign class
    this.div = $('<div></div>').attr("class", "div");
    $(this.div).append(this.value);
    $('.container').append(this.div);

    // when Roll All Dice button is clicked, run the rollAll method (below)
    $('#all').click(() => this.rollAll());

    // when a div is clicked, run rollOne function below
    $('.div').click(() => this.rollOne());

    // when any div is double clicked, run removeOne function below
    $('.div').dblclick(() => this.removeOne());
  }

  // roll all dice again; get random number, replace value in div
  rollAll() {
    this.value = Math.floor(Math.random() * 6 + 1);
    $(this.div).html(this.value);
  }

  // roll the clicked dice again
  rollOne() {
    this.value = Math.floor(Math.random() * 6 + 1);
    $(this.div).html(this.value);
  }

  //remove die that was clicked from display and from sumable dice
  removeOne() {
    $(this.div).remove();
  }

}

// when Add All Dice button is clicked, add value (text) in each div, display sum as alert
$('#sum').click(function() {
  let sum = 0;
  $('.div').each(function() {
    sum += parseFloat($(this).text()); //parseFloat turns strings into sumable numbers
  })
  alert(sum);
})

// Roll 1 Die button generates random number, creates an instance of Die class
$('#btn').click(function roll() {
  let val = Math.floor(Math.random() * 6 + 1);
  let die = new Die(val);
})

.div {
  border: 1rem solid black;
  height: 20rem;
  width: 20%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Dicey Business</h1>
<div class="container">
  <div>
    <button id="btn">Roll 1 Die</button>
    <button id="all">Roll All Dice</button>
    <button id="sum">Add All Dice</button>
  </div>
</div>

Answer 1

目前，每个实例化都会将一个remove-this-div-on-click侦听器附加到所有 .div：

$('.div').click(() => this.removeOne());

因此，当点击任何.div时，每个侦听器都会触发，并且所有侦听器都会被删除。相反，在构造函数中，只将侦听器附加到新创建的.div ：

$(this.div).dblclick(() => this.removeOne());

＆＃13;

// create a class called Die
class Die {
  constructor(value) {

    // set value property
    this.value = value;

    // create a div for each new object, assign class
    this.div = $('<div></div>').attr("class", "div");
    $(this.div).append(this.value);
    $('.container').append(this.div);

    // when Roll All Dice button is clicked, run the rollAll method (below)
    $('#all').click(() => this.rollAll());

    // when a div is clicked, run rollOne function below
    $(this.div).click(() => this.rollOne());

    // when any div is double clicked, run removeOne function below
    $(this.div).dblclick(() => this.removeOne());
  }

  // roll all dice again; get random number, replace value in div
  rollAll() {
    this.value = Math.floor(Math.random() * 6 + 1);
    $(this.div).html(this.value);
  }

  // roll the clicked dice again
  rollOne() {
    this.value = Math.floor(Math.random() * 6 + 1);
    $(this.div).html(this.value);
  }

  //remove die that was clicked from display and from sumable dice
  removeOne() {
    $(this.div).remove();
  }

}

// when Add All Dice button is clicked, add value (text) in each div, display sum as alert
$('#sum').click(function() {
  let sum = 0;
  $('.div').each(function() {
    sum += parseFloat($(this).text()); //parseFloat turns strings into sumable numbers
  })
  alert(sum);
})

// Roll 1 Die button generates random number, creates an instance of Die class
$('#btn').click(function roll() {
  let val = Math.floor(Math.random() * 6 + 1);
  let die = new Die(val);
})

＆＃13;

.div {
  border: 1rem solid black;
  height: 20rem;
  width: 20%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Dicey Business</h1>
<div class="container">
  <div>
    <button id="btn">Roll 1 Die</button>
    <button id="all">Roll All Dice</button>
    <button id="sum">Add All Dice</button>
  </div>
</div>

＆＃13;

你也可以考虑更有信息地命名骰子div - div的类名听起来像是一个非常容易混淆的来源。（例如，可能是.die？）

Answer 2

你应该能够通过从给予所有事件处理程序的事件对象中获取它来双击到removeOne的元素：

$('.div').dblclick((event) => this.removeOne(event.target));

然后在removeOne中你可以这样做：

removeOne(elem) {
  $(elem).remove();
}

jQuery的;从具有相同类的其他div中删除内部构造函数中的clicked div

2 个答案: