在 div 上单击更改按钮内部的文本，在单击另一个 div 时重置以前的文本

Question

我有三列都有一个显示按钮，当单击“建议卡”div 以“隐藏”时，我需要更改按钮的文本，并且我需要其他按钮切换回来以显示不同的“建议”卡的 div 被点击。 谢谢

<div id="general-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>


<div id="super-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>


<div id="retirement-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>

Answer 1

我不确定您在寻找什么，因为您没有共享您的 js 代码，但也许下面的解决方案会对您有所帮助。

 jQuery(function($){ $('.advice-card').each(function(){ $(this).click(function(e){ if($(this).hasClass('active-card')){ $(this).removeClass('active-card'); $(this).find('button').text('Show'); } else { $(this).addClass('active-card').siblings().removeClass('active-card'); $(this).find('button').text('hide'); $(this).siblings().find('button').text('Show'); } }); }); });

 .advice-card { margin: 2px auto; width: 400px; height: auto; padding: 24px; border: 1px solid #eee; transition: all ease-in-out 0.3s; display: flex; }.advice-card.active-card { border: 1px solid red; }.advice-card.advice-card-footer { width: 100%; }.advice-card button { color: #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; background: blue; border: 0px; border-radius: 5px; padding: 12px 24px; float: right; display: inline-block; }.advice-card.active-card button { background: red; }.advice-card.advice-card-footer p { margin: 0px; visibility: hidden; opacity: 0; height: 0px; transition: all ease-in-out 0s; clear: both; }.advice-card.active-card.advice-card-footer p { margin: 24px auto; visibility: visible; opacity: 1; height: auto; transition: all ease-in-out 0.3s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="general-advice" class="col-sm advice-card"> <div class="advice-card-footer"> <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p> <button>Show</button> </div></div> <div id="super-advice" class="col-sm advice-card"> <div class="advice-card-footer"> <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p> <button>Show</button> </div></div> <div id="retirement-advice" class="col-sm advice-card"> <div class="advice-card-footer"> <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p> <button>Show</button> </div></div>

Answer 2

这应该可以解决问题。

    <div id="general-advice" class="col-sm advice-card">
    <div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button class="hideShowButton" id="button-0" onclick="hideShow(this.id)">Show</button>
    </div>
    </div>
    
    
    <div id="super-advice" class="col-sm advice-card">
    <div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button class="hideShowButton" id="button-1" onclick="hideShow(this.id)">Show</button>
    </div>
    </div>
    
    
    <div id="retirement-advice" class="col-sm advice-card">
    <div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button class="hideShowButton" id="button-2" onclick="hideShow(this.id)">Show</button>
    </div>
    </div>


<script>
    function hideShow(id){
        let i = 0; 
        let currentElement;
        let clickedElement;
        let elements = document.getElementsByClassName("hideShowButton");
        for(i = 0; i < elements.length; i ++){
            currentElement  = elements[i];
            if(currentElement.id != id){
                currentElement.innerHTML = "Show";
            }
            else{
                clickedElement = currentElement;
            }
        }

        if(clickedElement.innerHTML == "Hide"){
            clickedElement.innerHTML = "Show";
        }else{
            clickedElement.innerHTML = "Hide";
        }         

    }
</script>