如何使用按钮的 "OnClick" 功能切换名称？

Question

如果点击按钮时“data-count-type”的值为0，我想将“data-charactercount”的值写入按钮

再次点击按钮时，如果“data-count-type”的值为1，我想将“data-wordcount”的值写入按钮

总而言之，我希望每次单击按钮时按钮的两个值之间的文本部分都发生变化。（切换）

代码中有一点错误，所以它不起作用。我应该怎么安排？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" data-count-type="0" data-wordcount="15 Words" data-charactercount="50 Character" onclick="( (this.getAttribute('data-count-type')==0) ? this.innerText = this.getAttribute('data-wordcount'), this.setAttribute('data-count-type',1)  : this.getAttribute('data-charactercount'), this.setAttribute('data-count-type',0) )">BUTTON</button>

Answer 1

使用 jQuery，您可以这样做：

$(function() {
   $('button').on('click', function() {
      var countType = $(this).data('countType');
      var wordCount = $(this).data('wordcount');
      var charCount = $(this).data('charactercount');
      var result = countType === 0
        ? wordCount 
        : charCount;
      $(this).data('countType', ++countType).text(result);
   });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" data-count-type="0" data-wordcount="15 Words" data-charactercount="50 Character">BUTTON</button>

或内联：

<button type="button" data-count-type="0" data-wordcount="15 Words" data-charactercount="50 Character" 
onclick="
this.innerText = (this.dataset.countType==0) 
    ? this.dataset.wordcount 
    : this.dataset.charactercount;
this.dataset.countType = ++this.dataset.countType">BUTTON</button>

Answer 2

不是 100% 确定您要的是什么，但我猜是这样的：

function handleClick (e) {
  const target = $(e.target)
  
  if (Boolean(target.data('count-type'))) {
    target.text(target.data('wordcount'))
  } else {
    target.text(target.data('charactercount'))
  }
  
  target.data('count-type', !Boolean(target.data('count-type')))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" data-count-type="0" data-wordcount="15 Words" data-charactercount="50 Character" onclick="handleClick(event)">BUTTON</button>

这是如何运作的

我们创建了一个名为 handleClick 的函数来解析参数 e 这引用了点击事件我们还有一个名为 target 的常量变量，其值为 $(e.target)这是目标元素（具有点击事件的元素）。

然后我们有一个 if 语句检查 count-type 数据属性的值，并将条件的数据类型更改为布尔值，如果为真，则设置目标元素内部文本如果条件为 false，则设置为 data-wordcount 的值，然后将 target 的内部文本设置为 data-charactercount.

的值

然后我们设置 count-type 不是它的值（例如，如果 true = false，如果 false = true）。

在 HTML 中，我们有一个名为 onclick 的属性，该属性设置为我们声明的函数 handleClick(event)，我们正在将 event 解析为我们的函数。

Answer 3

根据我的最佳理解，

您正在尝试创建一个按钮，您将在其中访问 data-count-type 的值。如果 data-count-type 为 0，则按钮应将内部文本更改为 data-charactercount 并且如果 data-count-type 为 1，则按钮应将内部文本更改为 data-wordcount

这是一个使用内联 JS 执行 above-discribed 行为的片段。

注意： 为了便于理解，我在下面的代码片段中有 2 个按钮，其中 1 个按钮设置为 data-count-type = 0，第二个设置为 data-count-type = 1。但是两者的内联脚本代码是相同的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" data-count-type="1" data-wordcount="15 Words" data-charactercount="50 Character" onclick="
    if(this.getAttribute('data-count-type')==0){
        this.innerText = this.getAttribute('data-charactercount');
    } else if (this.getAttribute('data-count-type')==1){
        this.innerText = this.getAttribute('data-wordcount');
    }else{
    }
">BUTTON with data-count-type value 1</button>

<br>
<br>

<button type="button" data-count-type="0" data-wordcount="15 Words" data-charactercount="50 Character" onclick="
    if(this.getAttribute('data-count-type')==0){
        this.innerText = this.getAttribute('data-charactercount');
    } else if (this.getAttribute('data-count-type')==1){
        this.innerText = this.getAttribute('data-wordcount');
    }else{
    }
">BUTTON with data-count-type value 0</button>

Answer 4

<button type="button" data-count-type="0" data-wordcount="15 Words" data-charactercount="50 Character" onclick="0==this.getAttribute('data-count-type')?this.innerText=this.getAttribute('data-wordcount'):this.innerText=this.getAttribute('data-charactercount'),0==this.getAttribute('data-count-type')?this.setAttribute('data-count-type',1):this.setAttribute('data-count-type',0);">BUTTON</button>

如何使用按钮的 "OnClick" 功能切换名称？

How to Toggle the name with the "OnClick" feature of the button?

html

javascript

jquery

toggle

这是如何运作的