Question

当一个特定的div元素达到3次点击时，我想用另一个元素替换它。那是唯一的任务，我正在尝试用代码完成。

我尝试查看一些执行此操作的代码，但是所有人都用get go替换了它们，但它们没有给您提供数量来指定何时替换它。

示例：<div id="1"></div>已被用户单击3次。一旦超过该数量，请替换为<div id="3"></div>

Answer 1

主要思想是在第一个div开始监听点击事件并对其进行计数。以下代码显示了此概念。首先，我们将第一个div放入变量中，以便能够在其上创建事件侦听器，还创建初始值为0的count变量。然后预先制作第二个div，稍后将替换第一个div。最后一点也很明显：将事件侦听器放在div1上，它将使count递增，并在每次单击时检查它是否等于3。

const div1 = document.querySelector('#id-1');
let count = 0;

// pre-made second div for future replacement
const divToReplace = document.createElement('div');
divToReplace.id = 'id-2';
divToReplace.innerText = 'div 2';

div1.addEventListener('click', () => {
  count ++;
  if (count === 3) {
    div1.parentNode.replaceChild(divToReplace, div1);
  }
});

<div id="id-1"> div 1 </div>

请注意，这种方法很容易理解，但是代码本身并不是最好的，尤其是在您需要重用该逻辑的情况下。下面的示例有点复杂-我们创建一个带有2个参数的函数：一个用于跟踪元素，另一个-用于替换元素。这种方法将使我们能够在需要时重用功能。

function replaceAfter3Clicks(elem, newElem) {
    let count = 0;
    div1.addEventListener('click', () => {
        count ++;
        if (count === 3) {
            elem.parentNode.replaceChild(newElem, elem);
        }
    });
}

const div1 = document.querySelector('#id-1');

// pre-made second div for future replacement
const div2 = document.createElement('div');
div2.id = 'id-2';
div2.innerText = 'div 2';

replaceAfter3Clicks(div1, div2);

<div id="id-1"> div 1 </div>

Answer 2

更改 id 属性不是一个好主意，相反，您可以使用 data- 属性，如下所示：

var count = 0; // Declare a variable as counter
$('#1').click(function(){
  count++; // Increment the couter by 1 in each click
  if(count == 3) // Check the counter
    $(this).data('id', '3'); // Set the data attribute
  console.log($(this).data('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" data-id="1">Click</div>

Answer 3

您可以编写一个JavaScript函数来跟踪您单击特定DOM元素（即div元素和id="1"）的频率。单击该元素三次后，它将被另一个也可以在JavaScript中创建的DOM元素替换。

var clicks = 0;

function trackClick(el) {
  clicks++;

  if(clicks === 3) {
    var newEl = document.createElement('div');
    newEl.textContent = 'Div3';
    newEl.id = '3';
    el.parentNode.replaceChild(newEl, el);
  }
}

<div id="1" onclick="trackClick(this)">Div1</div>

如果您应该使用jQuery之类的库或使用其他HTML结构，请指定您的问题来改进此代码段，以使其适合您的目的。

Answer 4

如果您知道如何使用JQuery，只需在div 1上放置一个click事件处理程序。在该处理程序上，将click计数器增加到3。如果达到3，则再次用JQuery替换div。

如果要替换多个div，请使用一组计数器而不是单个计数器，或者通过JQuery修改用户特定的数据属性。

Answer 5

使用本机JavaScript，而不是依赖库（可能会带来所有好处），可以采用以下方法：

// A named function to handle the 'click' event on the relevant elements;
// the EventObject is passed in, automatically, from EventTarget.addEventListener():
const replaceOn = (event) => {

  // caching the element that was clicked (because I'm using an Arrow function
  // syntax we can't use 'this' to get the clicked element):
  let el = event.target,

    // creating a new <div> element:
    newNode = document.createElement('div'),

    // retrieving the current number of clicks set on the element, after this
    // number becomes zero we replace the element. Here we use parseInt() to
    // convert the string representation of the number into a base-10 number:
    current = parseInt(el.dataset.replaceOn, 10);

  // here we update the current number with the decremented number (we use the
  // '--' operator to reduce the number by one) and then we update the
  // data-replace-on attribute value with the new number:
  el.dataset.replaceOn = --current;

  // here we discover if that number is now zero:
  if (current === 0) {
    // if so, we write some content to the created <div> element: 
    newNode.textContent = "Original element has been replaced.";

    // and here we use Element.replaceWith() to replace the current
    // 'el' element with the new newNode element:
    el.replaceWith(newNode);
  }
};

// here we use the [data-replace-on] attribute-selector to search
// through the document for all elements with that attribute, and
// use NodeList.forEach() to iterate over that NodeList:
document.querySelectorAll('[data-replace-on]').forEach(

  // using an Arrow function we pass a reference to the current
  // Node of the NodeList to the function, and here we use
  // EventTarget.addEventListener() to bind the replaceOn function
  // (note the deliberate lack of parentheses) to handle the
  // 'click' event:
  (element) => element.addEventListener('click', replaceOn)
);

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid #000;
  display: inline-block;
  padding: 0.5em;
  border-radius: 1em;
}

div[data-replace-on] {
  cursor: pointer;
}

div[data-replace-on]::before {
  content: attr(data-replace-on);
}

<div data-replace-on="3"></div>
<div data-replace-on="13"></div>
<div data-replace-on="1"></div>
<div data-replace-on="21"></div>
<div data-replace-on="1"></div>
<div data-replace-on="6"></div>
<div data-replace-on="4"></div>

参考文献：

CSS：
- Attribute-selectors ([attribute=attribute-value])。
JavaScript：

单击3次后替换DIV元素

5 个答案: