Question

您好，

我想创建一个按钮来切换一些文本，我希望文本更改与id相关。

所以1个按钮可以打开/关闭文本，而文本会根据ID

进行更改

有可能吗？

编辑：

我一方面有幻灯片，我可以用它来更改显示的图像，另一方面有一个关于图像当前图像的文本。我还想在图像更改的同时更改文本。

我还有一个按钮用于切换文本的开/关，我不希望在网站第一次加载时显示文本。

文字和图片如何同时更改，但只有在按下切换按钮时才会显示文字？

对于我的HTML：

  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 1</p>
  <div class="txt-div" id="1">
    <p>Text 1</p></p>
  </div>

  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 2</p>
  <div class="txt-div" id="2">
    <p>Text 2</p></p>
  </div>

  <button class="chat-button w3-display-left" onclick="plusDivs(-1)"></button>
  <button class="chat-button w3-display-right" onclick="plusDivs(1)"></button>  
  <button class="chat-button-txt">Text</button>

对于CSS我有：

.txt-div{
...
display: none;
...
}

对于JS我有：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("img-count");
    var txt = document.getElementsByClassName("txt-div");
    var noms = document.getElementsByClassName("img-name");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
     dots[i].style.display = "none";
     noms[i].style.display = "none";
  }

  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].style.display = "block";
  noms[slideIndex-1].style.display = "block";

    $(document).ready(function(){
        $(".chat-button-txt").click(function(){
        $(".txt-div").toggle();
        });
    });
}

我不知道如何在“x”，“dots”和“noms”的同时更改文本，而只有在通过“chat-button-txt”切换时显示

有人有想法吗？

Answer 1

我找到了一个解决方案，通过添加其他类来使用切换按钮“屏蔽”文本，文本可以在图像更改的同时更改，但这不是“更好的方法”吗？

我的实际代码：

HTML

<div class="cover-txt"></div>
  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 1</p>
  <div class="txt-div" id="1">
    <p>Text 1</p>
  </div>

  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 2</p>
  <div class="txt-div" id="2">
    <p>Text 2</p>
  </div>

<button class="chat-button w3-display-left" onclick="plusDivs(-1)"></button>
  <button class="chat-button w3-display-right" onclick="plusDivs(1)"></button>  
  <button class="chat-button-txt">Text</button>

CSS

.cover-txt{
position: absolute;
background-color: white;
display: block;
top:10%;
left:104%;
width: 22vw;
height: 25vw;
z-index: 999;
}

JS

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}
function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("img-count");
    var txt = document.getElementsByClassName("txt-div");
    var noms = document.getElementsByClassName("img-name");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
     dots[i].style.display = "none";
     noms[i].style.display = "none";
     txt[i].style.display = "none";
  }

  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].style.display = "block";
  noms[slideIndex-1].style.display = "block";
  txt[slideIndex-1].style.display = "block";

    $(document).ready(function(){
        $(".chat-button-txt").click(function(){
        $(".cover-txt").toggle();
        });
    });
}

我认为这不是最好的解决方案，但我为我工作。如果有人有更好的东西，我会很高兴看到它。

非常感谢，

问候，

û

1个按钮切换多个带id的文本

1 个答案: