jquery 在HTML中使用Button [Duplicate]更改div文本的最佳实践

qmelpv7a 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(107)

- 此问题已在此处有答案**：

Changing text depending selected value（4个答案）
How to correctly retrieve and change the text's value stored from an array in jQuery?（1个答案）
How to set divs value from an array using jquery.each()（4个答案）
昨天关门了。
我正在寻找最佳实践来更改我的网站页面上的元素的文本内容。
实际上我有4个按钮（我的目标是9个）。每个按钮都应该能够根据最后单击的按钮来更改文本。
这里是html部分

<head>
</head>
<body>
<div class="col-12">
  <button class="button-pltfrm button-ptf-1">Button 1</button>
  <button class="button-pltfrm button-ptf-2">Button 2</button>
  <button class="button-pltfrm button-ptf-3">Button 3</button>
  <button class="button-pltfrm button-ptf-4">Button 4</button>
  </div>
  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>
</body>

我已经试过了。首先使用jquery：

$(".button-pltfrm").click(function () {
    if($(this).hasClass("button-ptf-1"))
        $("#change-txt").text("This text belong to the first button");
    if($(this).hasClass("button-ptf-2"))
        $("#change-txt").text("This text belong to the second button");
    if($(this).hasClass("button-ptf-3"))
        $("#change-txt").text("This text belong to the third button");
    if($(this).hasClass("button-ptf-4"))
        $("#change-txt").text("This text belong to the fourth button");
  });

这里有一个jsfiddle的链接，它做了完全相同的事情。[1] https://jsfiddle.net/4m0z8srb/20/
我发现我必须对每个按钮的每个标签进行测试的事实相当不清楚。它还需要修改JavaScript文件，每次我想添加一个按钮。
我试了另一个版本，似乎更清晰一点。在这个例子中，按钮是在原始JavaScript中调用函数的按钮。它们用文本要变成的参数调用函数。下面是HTML代码（我不得不修改它）：

<head>
</head>
<body>
<div class="col-12">
  <button onclick="chng_txt('This text belong to the first button')" class="button-pltfrm">Button 1</button>
  <button onclick="chng_txt('This text belong to the second button')" class="button-pltfrm">Button 2</button>
  <button onclick="chng_txt('This text belong to the third button')" class="button-pltfrm">Button 3</button>
  <button onclick="chng_txt('This text belong to the fourth button')" class="button-pltfrm">Button 4</button>
  </div>
  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>
</body>

<script>
var cameleon_txt = document.getElementById("change-txt");
function chng_txt(text)
{
    cameleon_txt.innerHTML = text;
}
</script>

我还在这个实现中添加了一个到另一个jsfiddle的链接。[2] https://jsfiddle.net/e8x45chn/7/。在这个版本中，我真的不喜欢文本位于onclick调用的函数的参数中。如果我想放一个更大的文本，这会让行很长。
正如你所看到的，我尝试了两个JS选项，但我想知道是否有一个很好的方法来做到这一点，也许与CSS的想法，文本可能需要翻译后。
我正在寻找最佳实践，理想情况下，如果有人在我之后继续编写代码，那么它将更加清晰。

jquery

来源：https://stackoverflow.com/questions/76514863/best-practice-to-change-the-text-of-a-div-in-html-with-button

2条答案

按热度按时间

gab6jxml1#

您可以将文本放入data-text属性中：

$('.button-list').on('click', 'button', e =>  
  $('#change-txt').text($(e.target).data('text'))
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 button-list">
  <button data-text="Selected 1">Button 1</button>
  <button data-text="Selected 2">Button 2</button>
  <button data-text="Selected 3">Button 3</button>
  <button data-text="Selected 4">Button 4</button>
  </div>
  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>

赞(0）回复(0）举报 2023-06-22

iyr7buue2#

我喜欢使用数组或对象作为按钮/文本Map，使用按钮索引作为键。这样可以将数据排除在标记之外（并在脚本中进行一定程度的隔离，以便于维护--例如，它可能来自另一个文件）。
这里我使用一个简单的数组。您可以使用对象来将索引或ID与文本值相关联。
这里有一个helpful resource，当你（现在或最终）从jQuery过渡过来时，我认为jQuery是一个很棒但越来越不必要的库。

const textMap = ['text one', 'text two', 'text three', 'text four'];

document.querySelectorAll('.button-pltfrm').forEach(el => {
  el.onclick = () => {
    const index = [...el.parentNode.children].indexOf(el);
    chng_txt(textMap[index]);
  };
});

function chng_txt(text) {
  document.querySelector('#change-txt').innerHTML = text;
}

<body>
  <div class="col-12">
    <button class="button-pltfrm">Button 1</button>
    <button class="button-pltfrm">Button 2</button>
    <button class="button-pltfrm">Button 3</button>
    <button class="button-pltfrm">Button 4</button>
  </div>

  <div class="col-12 pltfrm-distrib-wrapper">
    <div>
      <p id="change-txt" class="horaire-distrib">
        I wanna change this text to something else
      </p>
    </div>
  </div>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 在HTML中使用Button [Duplicate]更改div文本的最佳实践

2条答案

相关问题

热门标签

最新问答