如何使用 js 或 jquery 切换带有简码的文本？

Question

我的目标是在点击饼图后它会自动向下滚动并激活阅读更多以显示该饼图的描述。我不能在这个短代码中使用 jquery 因为它与视图是分开的。我尝试在图表中添加 class="toggle-text-button"，但它不起作用

饼图的简码

function pie_chart( $atts, $content="" ) {
    $atts = shortcode_atts(array(), $atts, 'pie_chart');
    $html = "";
    $html .= '<div class="big-pie">';
        $html .= '<a href="#first" toggle-text="1"><div id="slice-1" class="hold"><span>First</span></div></a>';
        $html .= '<a href="#second" toggle-text="2"><div id="slice-2" class="hold"><span>Second</span></div></a>';
    $html .= '</div>';

    return $html;
}

阅读更多视图

<!-- First -->
<div id="first">
    <h3 class="py-3">First</h3>
    <p>Shown Texts.</p>
    <p class="toggle-text" id="toggle-text-1">Hidden Texts.</p>
    <a class="toggle-text-button" toggle-text="1">Read More</a>
</div>
<!-- Second -->
<div id="first">
    <h3 class="py-3">Second</h3>
    <p>Shown Texts.</p>
    <p class="toggle-text" id="toggle-text-2">Hidden Texts.</p>
    <a class="toggle-text-button" toggle-text="2">Read More</a>
</div>

点击饼图后向下滚动的脚本

<script type="text/javascript">
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        },1000);
        return false;
    });
</script>

阅读更多，查看更多文章

<script type="text/javascript">// Add click event dynamically
    jQuery(function($){
        $(document).on("click", ".toggle-text-button", function() {

          if ($(this).text() == "Read More") {

            $(this).text("Read Less");

            // Use a jquery selector using the `.attr()` of the link
            $("#toggle-text-" + $(this).attr("toggle-text")).slideDown();

          } else {

            $(this).text("Read More");

            // Use a jquery selector using the `.attr()` of the link
            $("#toggle-text-" + $(this).attr("toggle-text")).slideUp();

          }

        });
    });
</script>

Answer 1

^{如果你只想在滚动后显示文本（触发点击的按钮）}你可以使用.animate回调函数然后使用.find()找到按钮，然后 .click 触发点击

<script type="text/javascript">
     $('a[href^="#"]').click(function(){
        var The_Element = $($(this).attr('href'));
        $('html, body').animate({
            scrollTop: The_Element.offset().top
        },1000 , function(){
            The_Element.find('.toggle-text-button:not(".clicked")').click(); // or .trigger('click') // .toggle-text-button:not(".clicked")
        });
        return false;
     });
</script>

补充说明：

使用$('a[href^="#"]')其hrefs以#开头的锚，因为$('a')将select所有锚
无需使用 attr 足以使用 $(this).prev('p.toggle-text')
最好在按钮点击中使用 add/removeClass 以防止点击动画后隐藏已经显示的文本

<script type="text/javascript">// Add click event dynamically
    jQuery(function($){
        $(document).on("click", ".toggle-text-button", function() {

          if ($(this).text() == "Read More") {

            $(this).addClass('clicked').text("Read Less"); //.addClass('clicked')

            // Use a jquery selector using the `.attr()` of the link
            $(this).prev('p.toggle-text').slideDown();

          } else {

            $(this).removeClass('clicked').text("Read More"); // .removeClass('clicked')

            // Use a jquery selector using the `.attr()` of the link
            $(this).prev('p.toggle-text').slideUp();

          }

        });
    });
</script>

$(function(){
  $('a[href^="#"]').click(function(){
    var The_Element = $($(this).attr('href'));
    $('html, body').animate({
        scrollTop: The_Element.offset().top
    },1000 , function(){
        The_Element.find('.toggle-text-button:not(".clicked")').click(); // or .trigger('click') // .toggle-text-button:not(".clicked")
    });
    return false;
  });
  
  $(document).on("click", ".toggle-text-button", function(){
    if ($(this).text() == "Read More") {
      $(this).addClass('clicked').text("Read Less"); //.addClass('clicked')
      // Use a jquery selector using the `.attr()` of the link
      $(this).prev('p.toggle-text').slideDown();
    } else {
      $(this).removeClass('clicked').text("Read More"); // .removeClass('clicked')
      // Use a jquery selector using the `.attr()` of the link
      $(this).prev('p.toggle-text').slideUp();
    }
  });

})

body *{
  margin : 0;
  padding : 0;
}
.big-pie{
  position : fixed;
  top : 0;
  background : red;
  right : 0;
}
.big-pie > a{
  display : inline-block;
  color : #fff;
  padding : 5px;
}

.TheElement{
  height : 500px;
}
.toggle-text{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="big-pie">'
  <a href="#first"><div id="slice-1" class="hold"><span>First</span></div></a>
  <a href="#second"><div id="slice-2" class="hold"><span>Second</span></div></a>
</div>

<div style="height : 1000px;"></div>

<!-- First -->
<div id="first" class="TheElement">
    <h3 class="py-3">First</h3>
    <p>Shown Texts.</p>
    <p class="toggle-text">Hidden Texts.</p>
    <a class="toggle-text-button">Read More</a>
</div>
<!-- Second -->
<div id="second" class="TheElement">
    <h3 class="py-3">Second</h3>
    <p>Shown Texts.</p>
    <p class="toggle-text">Hidden Texts.</p>
    <a class="toggle-text-button">Read More</a>
</div>

如何使用 js 或 jquery 切换带有简码的文本？

How can I toggle text with shortcode using js or jquery?

javascript

jquery

shortcode