当 class 添加到单独的 div 时更改 p 标签文本

Question

我需要三个面板根据按钮（p 标签）是否被点击来显示或隐藏它的一些内容，然后根据情况更改按钮被点击时的文本以显示或隐藏。 然而，隐藏的内容是为了在移动设备上自动隐藏，所以我添加了一些 javascript 来执行此操作，但现在按钮文本更改由于在点击时触发而变得混乱。 相反，我想要的是，如果添加了“单击隐藏”class，则更改按钮文本，如果未添加，则还原。 帮助将不胜感激:)

HTML

    <div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>
<div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>
<div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>

Javascript

    //COMPARISON CARD SCRIPT---------------
//This wll show and hide the card attributes section inside the card
jQuery('.hide-show-attributes').on('click', function() {
    jQuery('.compare-card-attributes').toggleClass('clicked-hide');
 });

//This will toggle the text on the show hide p tag button messaging
 jQuery(document).ready(function($) {
    $('.compare-card-footer').find(".hide-show-attributes").click(function(){;
        if($(this).find("span.toggleShow").first().text()=="Hide Details"){
            $("span.toggleShow").text("Show Details");
        }
        else {
            $("span.toggleShow").text("Hide Details");
        }
    });
});

//Mobile Switch - this will auto collapse the panel when the user is on mobile
if($(window).width()<600){
    $(".compare-card-attributes").addClass("clicked-hide");
    $('span.toggleShow').text('Show Details');
} 
else {
    $(".compare-card-attributes").removeClass("clicked-hide");
}
// this is used whenever the window is resized
$(window).resize(function(){
  if($(window).width()<600){
        $(".compare-card-attributes").addClass("clicked-hide");
    } 
    else {
        $(".compare-card-attributes").removeClass("clicked-hide");
    }
});

//END COMPARISON CARD SCRIPT---------------

Answer 1

首先，我建议您使用 CSS 将 set.compare-card-attributes 设置为 hidden on mobile

@media only screen and (max-width: 600px) {
  .compare-card-attributes {
    visibility: hidden;
  }
}

并且还有一个 class 的东西

.hidden {
  visibility: hidden;
}

那么你的脚本将需要（假设这些 jquery 方法已经在工作）

jQuery('.hide-show-attributes').on('click', function() {

    const cardAttributes = $('.compare-card-attributes');

    const toggleText = $(this).find("span.toggleShow").first();

    cardAttributes.toggleClass('hidden');


    if(cardAttributes.hasClass("hidden")){
        toggleText.text("Show Details");
    }
    else {
        toggleText.text("Hide Details");
    }
 });

我是盲目地写的，所以我希望它能起作用/有所帮助。

我建议您也为切换使用更具语义的元素，例如按钮或具有“role=button”属性的 div。