在紧要关头，卡在一个简单的点击文本循环中

对于一个项目，我试图强调循环推理的逻辑谬误，并在以后将宝贵的几行代码插入到单独的网页中。

我正在尝试创建一个简单的过程，单击显示的文本以在两个问题之间来回切换。我尝试过按钮，它只会变得复杂并且没有进展。半天过去了，我的头仍然在桌子上敲打，正如这句话所说。

我在其他地方读到创建var跟踪器会有所帮助，尽管我只看到图像而不是显示的文本。感觉就像我的智慧接近尽头，但我没有时间走开再试一次。

这是我到目前为止的代码：

<!doctype html>
<head>
<script>
function change() {
    var paragraph = document.getElementById("whytrust");
    paragraph.innerHTML="I am trustworthy, but how can you be sure?";
    }
</script>
</head>
<body>
<p id="whytrust" onclick="change();">You can trust me, but how can you be sure?</p>
</body>
</html>

您需要一些地方来保存旧消息，以便在切换内容后可以将其放回原处。

<!doctype html>
<head>
<script>
var newMsg = "I am trustworthy, but how can you be sure?";
function change() {
    var paragraph = document.getElementById("whytrust");
    var oldMsg = paragraph.innerHTML;
    paragraph.innerHTML = newMsg;
    newMsg = oldMsg;
    }
</script>
</head>
<body>
<p id="whytrust" onclick="change();">You can trust me, but how can you be sure?</p>
</body>
</html>

这是

您想要的快速而肮脏的实现。我在 html 元素中添加了一个 data-textindex 属性。在那里，我存储了当前显示的文本的索引。在javascript中，我检查当前值，更新data-textindex并将其替换为新文本。

function change() {
    let paragraph = document.getElementById("whytrust");
    let currentlyshown = paragraph.getAttribute('data-textindex');    
    if(currentlyshown == 0){
      paragraph.innerText="I am trustworthy, but how can you be sure?";
      paragraph.setAttribute('data-textindex', '1');
    }else if(currentlyshown == 1){
      paragraph.innerText="You can trust me, but how can you be sure?";
      paragraph.setAttribute('data-textindex', '0');
    }
}

<p id="whytrust" data-textindex="0" onclick="change();">You can trust me, but how can you be sure?</p>

附带说明：您可以大大改进此代码。就像将文本存储在 json 对象中一样。或者，如果您 100% 确定总会有 2 个选择，则可以使用三元运算符。也许给函数一些参数，以便您可以在更一般的场景中应用它。

尝试跟踪段落的某种"状态"——无论是开/关、活动/非活动......

每次调用 change() 函数时，它都不记得段落是什么或应该是什么。因此，通过设置某种状态(在我的示例中是分配给段落元素的数据状态属性(，代码可以知道如何行为。

function change() {
    var paragraph = document.getElementById("whytrust");
    var output = '';
    
    // data-* can be anything, but handy for referencing things
    var state = paragraph.getAttribute('data-state');
    // check if data-state even exists
    if( !state ){
      // set it to the default/original state
      paragraph.setAttribute('data-state', 'inactive');
      state = 'inactive';
    }
    
    // toggle the state
    // and assign the new text
    if( state === 'inactive' ){
      paragraph.setAttribute('data-state', 'active' );
      output = "I am trustworthy, but how can you be sure?";
    }else{
      paragraph.setAttribute('data-state', 'inactive');
      output = "You can trust me, but how can you be sure?";
    }
    
    paragraph.innerHTML = output;
    
}

<p id="whytrust" onclick="change();">You can trust me, but how can you be sure?</p>

没有跟踪状态的另一个选项可能是隐藏并显示要显示的段落。您实际上不需要跟踪状态或保存交替文本...

// get the elements from the DOM that you want to hide/show
// you can get tricky and add alternative ways to track
// the paragraph elements, but this works nice for a demo
const whytrust = document.getElementById('whytrust'),
      answer   = document.getElementById('whytrust-answer');
function change( element ){
  
  // the element parameter being passed is the paragraph tag
  // that is present/visible
  if( element.id === 'whytrust' ){
    answer.className = ''; // clear the .hide class
    whytrust.className = 'hide'; // add the .hide class
  }else{
    whytrust.className = ''; // clear the .hide class
    answer.className = 'hide'; // add the .hide class
  }
}

.hide{ display: none; }

<p id="whytrust" onclick="change(this);">I am trustworthy, but how can you be sure?"</p>
<p id="whytrust-answer" class="hide" onclick="change(this);">You can trust me, but how can you be sure?</p>

我喜欢这个解决方案的地方是它将内容保留在 HTML 中，而 JavaScript 只是担心隐藏/显示什么。

相关内容

最新更新

热门标签：