时间戳

首页 > 解决方案 > 为什么单击按钮在 JS 中没有给出有效的文本？

javascript - 为什么单击按钮在 JS 中没有给出有效的文本？

问题描述

我有2个cards像下面这样。

  <div class="card" id="b1">
          <div class="card-header">
               <div class="card-title">
                 Sample card 1
               </div>
          </div>

          <div class="card-body">
             <div class = "content1"> </div>
             <div class = "content2"> </div>
             <div class = "content3"> </div>
          </div>
          <button class="button1">0</button>
      </div>

      <!-- card 2 -->
  <div class="card" id="b2">
          <div class="card-header">
               <div class="card-title">
                 Sample card 1
               </div>
          </div>

          <div class="card-body">
             <div class = "content1"> </div>
             <div class = "content2"> </div>
             <div class = "content3"> </div>
          </div>
          <button class="button1">0</button>
      </div>

JS：

var btnVal = [];
function buttonData(card.id) {
    btnVal[card.id] = ! btnVal[card.id] ? 1 : btnVal[card.id] == 2 ? 0 : btnVal[card.id] + 1;
   switch(btnVal[card.id]) 
    {
     case 0:
      return {
       target: card.id,
       content1 : "Nice to code using Js",
       };
     case 1:
      return {
       target: card.id,
       content2 : "Nice to code using JQuery",
       };
      case 2:
       return {
       target: card.id,
       content1 : "Hello",
       content2 : "Greetings",
       };
       default:
         return {};
       }
  } 

function toaddtheText(card) {
    Callback(buttonData(card) , function (data) {
      bodyText(data)
    });
  }
 
function bodyText(data) {

if(data.content1) 
{
 var target = document.getElementById(data.target);
 var content = target.getElementsByClassName('content1')[0];
 content.innerHTML = data.content1;
}

if(data.content2) 
{
 var target = document.getElementById(data.target);
 var content = target.getElementsByClassName('content2')[0];
 content.innerHTML = data.content2;
}
 }
   
 $(document).on("click", ".button", function () {
   buttonData(b1);
});

当我button第一次在特定卡片中单击时，case 0应该执行，下一次，case1 下一次case2应该执行。

但是，如果我单击按钮，它会直接采用case2而不是case1.

问题是，data它只content2为所有目标获取文本。content1文本被忽略。

console.log(data) gives the following result.

object {
target: b1,
content2: "Nice to code using JQuery",
},
object {
target: b2,
content2: "Nice to code using JQuery",
},

有人可以帮忙吗？

非常感谢

标签： javascripthtmljquery

解决方案

如果值为 ，则函数的第一行将值更改为，因此buttonData您永远不会遇到第一种情况：btnVal[card.id]10

btnVal[card.id] = ! btnVal[card.id] ? 1 : btnVal[card.id] == 2 ? 0 : btnVal[card.id] + 1;

在上面，您的第一个三元组表示 if btnVal[card.id]is falsey （即0）设置btnVal[card.id]为1。之后，您使用btnVal[card.id] = 1.

假设您不期望其他虚假值，您可以完全删除此三元组，或者使用btnVal[card.id] !== undefined而不是!btnVal[card.id].

[编辑] 您可以将上面的行替换为：

btnVal[card.id] = btnVal[card.id] !== undefined ? 1 : btnVal[card.id] == 2 ? 0 : btnVal[card.id] + 1;

或者，如果您确定功能是正确的，则将此行放在函数的末尾，这样您只需在使用后更改值。

完整的功能就变成了：

function buttonData(card.id) {
  // store the current value of the card id if it exists, or zero.
  const value = btnVal[card.id] || 0;
  // increase the btnVal number 
  btnVal[card.id] = value > 1 ? 0 : value + 1;
  switch(btnVal[card.id]) {
    case 0:
      return {
        target: card.id,
        content1 : "Nice to code using Js",
      };
    case 1:
      return {
        target: card.id,
        content2 : "Nice to code using JQuery",
      };
    case 2:
      return {
        target: card.id,
        content1 : "Hello",
        content2 : "Greetings",
      };
    default:
      return {};
  }
}

推荐阅读