wordpress 作为一个由按钮触发的函数,我可以使用if和else来改变div的内容吗?

wtlkbnrh  于 2023-02-18  发布在  WordPress
关注(0)|答案(2)|浏览(92)

我正在尝试使用if和else来更改我的WordPress站点中一个div的内容。我想要的是:
我有一组8个按钮,希望每个按钮在我的页面的div中放置一个特定的数据(短代码),因此,假设当用户单击按钮1时,他在我的站点的内容区域中看到数据1,当他单击按钮2时,数据1消失,显示数据2。
由于我对Java和PHP还很陌生,我不确定解决我的问题的最佳方法。我尝试过使用JQuery的hide和show,但我认为以后更新数据会很麻烦。然后我考虑使用If/Else或Variables。由于我对这两种解决方案都很陌生,我首先尝试If/Else解决方案,因为它的概念听起来更容易。
我试过下面的代码,但是不起作用。div中的数据没有变化,我不知道为什么。

/* Style */

#content {
     width: 100%;
     padding: 50px 0;
     text-align: center;
     background-color: lightblue;
     margin-top: 20px;
     }
#btn-a {
     background-color:blue;
     color:yellow;
     }
#btn-b {
     background-color:red;
     color:yellow;
     }
/* HTML */
    <button id="btn-a" onclick="myFunction()">Button A</button>
    <button id="btn-b" onclick="myFunction()">Button B</button>
    <div id="content"></div>
/* Script */
    function myFunction() {
    if(document.getElementById('btn-a').clicked == true {
    document.getElementById("content").innerHTML = "Yay A! [shortcode-A]";}
    else-if(document.getElementById('btn-b').clicked == true {
    document.getElementById("content").innerHTML = "Yay B! [shortcode-B]";}
    }

正如我所说的,我是一个编码新手,所以我非常感谢任何对我的代码的帮助或者关于我应该尝试的新方法的建议。
原谅我的法语和谢谢。

46scxncf

46scxncf1#

有很多方法可以向元素添加特定的内容。下面我使用您提供的标记来设置一些内容。
你可能想在你的页面上添加标签,绝对没有必要使用jQuery

const btns = document.querySelectorAll('button');
const content = document.querySelector('#content');
let innerContent;

btns.forEach(btn=>{
  btn.addEventListener('click', ()=>{
    switch(true){
      case btn.classList.contains('btn-a'):
        innerContent = `<div class="inner-content">Content A</div>`;
        break;
        
      case btn.classList.contains('btn-b'):
        innerContent = `<div class="inner-content">Content B</div>`;
        break;
      
      default:
        innerContent = `<div class="inner-content">Default Content</div>`;
    }
    content.innerHTML = innerContent;
  })
})
.inner-content {
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

.btn {
  padding: 1rem;
  border: 0;
  cursor: pointer;
  border-radius: 0.25rem;
}

.btn-a {
  background-color:blue;
  color:yellow;
}
.btn-b {
  background-color:red;
  color:yellow;
}
<button class="btn btn-a">Button A</button>
<button class="btn btn-b">Button B</button>
<div id="content"></div>

这是另一个将内容添加到html而不是包含在JavaScript中的示例。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

0h4hbjxa

0h4hbjxa2#

谢谢你,prettyinpink。按照你的建议和一些W3Schools的例子,我已经得到了一个新的代码,更好地工作对我所需要的。但我仍然有一个问题。
当我点击第三组按钮(产品有效性)时,它们会显示它们应该显示的内容,但按钮也会马上消失。我希望它们保持可见,直到按下一个新按钮。
我该怎么做呢?
要执行该问题,请单击以下按钮:产品2〉类型1〉12个月。

// Make first group of buttons show/hide content about product plus second group of buttons

function openTab(evt, openTab, subTab) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace("active", "");
    }
    
    if(subTab) {
      var parent = evt.currentTarget.closest('.tabcontent');
      parent.style.display = "block";
      parent.className += " active";
    }
    document.getElementById(openTab).style.display = "block";
    evt.currentTarget.className += " active";
}

// Make third group of buttons show only when second group is clicked

const btns = document.querySelectorAll('input');
const innerContent = document.querySelectorAll('.expdate');

btns.forEach(btn=>{
  btn.addEventListener('click', ()=>{
    innerContent.forEach(content=>content.style.display = 'none');
    document.querySelector('.expdate[data-content='+btn.dataset.btn+']').style.display = "block";
  });
});

// Get the element with id="" and click on it to go as default open
document.getElementById("ecpf").click();
/* Style tab */
.tab {
  overflow: hidden;
  border: none;
  background-color: #ffff;
}

/* Style tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
}

.tabcontent img{
  padding: 5px;
  margin: 5px 10px 5px 5px;
  width: 250px;
  float: left;
}

/* Tab fadding effect */
.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Style columns inside tabcontent */
.column {
  float: left;
}

.left {
  width: 68%;
}

.right {
  width: 22%;
}

/* Style price box */
.pricebox {
  display: block;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 8px 8px 0 rgba(0, 0, 0, 0.08);
  text-align: center;
}

.pricebox img{
  display: block;
  width: 65%;
  padding: 0px 20px 0px 20px;
  margin: 20px;
}

/* Style a button */
a.button {
  background-color: #43689B;
  width:60%;
  text-align: center;
  float: center;
  display: inline-block;
  cursor: pointer;
  padding: 8px 0 8px 0;
  margin: 3px 3px 20px 3px;
  border-radius: 4px;
  transition: 0.3s;
  font-size: 14px;
  color: #ffff;
}
a.button:hover {
  background-color: #22386F;
}

/*Style radio buttons */
input[type=radio] {
    display: none;
 }
 
input[type=radio] + label {
  background-color: #43689B;
  width:24%;
  text-align: center;
  float: left;
  cursor: pointer;
  padding: 8px 0 8px 0;
  margin: 3px 3px 3px;
  border-radius: 4px;
  transition: 0.3s;
  font-size: 14px;
  color: #ffff;
}

input[type=radio] + label:hover {
  background-color: #22386F;
}

input[type=radio]:checked + label {
 background-color: #3A7CD7;
}
<!-- Start Products -->
<div class="tab">
    <input type="radio" class="btn-check tablinks" name="produtos" id="ecnpj" autocomplete="off" onclick="openTab(event, 'ecnpjcontent')">
        <label class="btn btn-secondary" for="ecnpj">Product1</label>
  <input type="radio" class="btn-check tablinks" name="produtos" id="ecpf" autocomplete="off" checked onclick="openTab(event, 'ecpfcontent')">
        <label class="btn btn-secondary" for="ecpf">Product2</label>
  <input type="radio" class="btn-check tablinks" name="produtos" id="enfe" autocomplete="off" onclick="openTab(event, 'enfecontent')">
        <label class="btn btn-secondary" for="enfe">Product3</label>
 </div>

<!-- Start Product Content -->
    <div id="ecpfcontent" class="tabcontent">
        <div class="row">
            <img src="http://localhost:10005/wp-content/uploads/2023/02/product.png">
         <h3>Product Name2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<div class="column left">
  
 <!-- Start Product Type 1 -->
    <h3>Choose Product Type</h3>
            <div class="tab">
           <input type="radio" class="btn-check" data-btn="expdateecpfa1arq12m" name="tipos" id="a1arquivo" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
                <label class="btn btn-secondary" for="a1arquivo">Type1</label>
           <input type="radio" class="btn-check" data-btn="expdateecpfa3sm12m" name="tipos" id="a3semmidia" autocomplete="off" onclick="openTab(event, 'expdateecnpjasm12m', true)">
                  <label class="btn btn-secondary" for="a3semmidia">Type2</label>
           <input type="radio" class="btn-check" name="tipos" id="a3cartao" autocomplete="off" onclick="openTab(event, 'type3', true)">
                <label class="btn btn-secondary" for="a3cartao">Type3</label>
</div>
  
<!-- Start Validity Product 2 Type 1  --> 
  <div class="tab expdate" data-content="expdateecpfa1arq12m">
        <hr style="width:75%; text-align:center; margin-top:20px; margin-bottom:20px;">
            <h3>Choose Product Validity</h3>
    <input type="radio" class="btn-check" name="validade" id="12meses" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)"> 
             <label class="btn btn-secondary" for="12meses">12 Months</label>
    <input type="radio" class="btn-check" name="validade" id="24meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
              <label class="btn btn-secondary" for="24meses">24 Months</label>
    </div>
  
   <!-- Start Validity Product 2 Type 2 --> 
   <div class="tab expdate" data-content="expdateecpfa3sm12m">
        <hr style="width:75%; text-align:center; margin-top:20px; margin-bottom:20px;">
            <h3>Choose Product Validity</h3>
    <input type="radio" class="btn-check" name="validade" id="12meses" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
             <label class="btn btn-secondary" for="12meses">12 Months</label>
    <input type="radio" class="btn-check" name="validade" id="18meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
              <label class="btn btn-secondary" for="24meses">18 Months</label>
     <input type="radio" class="btn-check" name="validade" id="24meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
              <label class="btn btn-secondary" for="24meses">24 Months</label>
    </div>
</div>
    
<!-- Start Price Box -->
<!-- Price Product2-type1-validity1 --> 
 <div class="column right pricebox">
     <div id="priceecpfa1arq12m" class="tabcontent">
        <img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
           <p>Product Name 1 | Product Type 1 | 12 Meses</p>
        <hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">    
     <h4><s>$ 229,00</s></h4>
        <h1>$ 160,30</h1> 
         <a href="https://google.com" class="button">BUY NOW</a>
    </div>
</div>
        
<!-- Price Product2-type1-validity3 -->        
        <div class="column right pricebox">
        <div id="doel12" class="tabcontent">
        <img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
        <p>Product Name 1 | Product Type 1 | 24 Meses</p>
        <hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">    
        <h4><s>$ 155,00</s></h4>
        <h1>$ 108,00</h1>
        <a href="https://google.com" class="button">BUY NOW</a>
        </div>
        </div>
       
 <!-- Price Product2-type2-validity1 --> 
 <div class="column right pricebox">
     <div id="priceecpfaa3sm12m" class="tabcontent">
        <img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
           <p>Product Name 1 | Product Type 2 | 12 Meses</p>
        <hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">    
     <h4><s>$ 229,00</s></h4>
        <h1>$ 160,30</h1> 
         <a href="https://google.com" class="button">BUY NOW</a>
    </div>
</div>
        
<!-- Price Product2-type1-validity2 -->        
        <div class="column right pricebox">
        <div id="doel12" class="tabcontent">
        <img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
        <p>Product Name | Product Type | 24 Meses</p>
        <hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">    
        <h4><s>$ 155,00</s></h4>
        <h1>$ 108,00</h1>
        <a href="https://google.com" class="button">BUY NOW</a>
        </div>
        </div>
      
</div> 
</div> 

<!-- Start Product Type 1 -->
<div id="ecnpjcontent" class="tabcontent">
   <p> Replica </p>
</div>

相关问题