Question

我使用jQuery幻灯片效果切换文章内容的显示。但是当文章打开时，如果多个文章碰巧被打开，那么选择close with toggle会关闭所有可能打开的文章。我如何仅在此处定位当前文章..

<script>
jQuery(document).ready(function(){
    jQuery( ".content" ).hide();
    jQuery( ".entry-footer" ).hide();

    jQuery( ".more" ).click(function() {
        jQuery(this).parent().next('.content').show("blind",{direction:"vertical"},1000);
        jQuery(this).parent().next('.entry-footer').show("fast");
        jQuery(this).hide();
    });
    jQuery( ".close" ).click(function() {
        jQuery( ".content" ).hide("blind",{direction:"vertical"},1000);
        jQuery( ".more" ).show();
    });
});

</script>

<span class="excerpt">
    <?php
        $excerpt = get_the_content();
        $excerpt = strip_tags($excerpt);
        echo substr($excerpt, 0, 320);
    ?>
    <span class="more">[more]</span>
</span>
<span class="content">
    <?php
        $content = get_the_content();
        $content = strip_tags($content);
        echo substr($content, 321);
    ?>
    <span class="close">[close]</span>
</span>

Answer 1

尝试为每篇文章添加唯一标识符，例如ID或类。例如：

<span class="excerpt" ID='1'>
    <?php
        $excerpt = get_the_content();
        $excerpt = strip_tags($excerpt);
        echo substr($excerpt, 0, 320);
    ?>
    <span class="more">[more]</span>
</span>
<span class="content" ID='2'>
    <?php
        $content = get_the_content();
        $content = strip_tags($content);
        echo substr($content, 321);
    ?>
    <span class="close">[close]</span>
</span>

对于Jquery来说：

jQuery( ".close" ).click(function() {
    jQuery(this).parent().hide();
    jQuery( ".more" ).(this).parent().show();
});

此外，您不需要在整个代码中使用jquery。如果你这样做：

<script>
jQuery(document).ready(function($){
    $( ".content" ).hide();
    $( ".entry-footer" ).hide();

    $( ".more" ).click(function() {
        $(this).parent().next('.content').show("blind",{direction:"vertical"},1000);
        $(this).parent().next('.entry-footer').show("fast");
        $(this).hide();
    });
    $( ".close" ).click(function() {
        $( ".content" ).hide("blind",{direction:"vertical"},1000);
        $( ".more" ).show();
    });
});

</script>

请注意：

jQuery(document).ready(function($){

这允许你放弃在.ready（function（）{

中为你所做的每一件事输入jQuery。

显然我的答案被@James L.劫持了

Answer 2

<script>
jQuery(document).ready(function(){
    jQuery( ".content" ).hide();
    jQuery( ".entry-footer" ).hide();

    jQuery( ".more" ).click(function() {
        jQuery(this).parent().next('.content').show("blind",{direction:"vertical"},1000);
        jQuery(this).parent().next('.entry-footer').show("fast");
        jQuery(this).hide();
    });
    jQuery( ".close" ).click(function() {
        jQuery(this).parent().hide("blind",{direction:"vertical"},1000);
        jQuery( ".more" ).show();
    });
});

</script>

因为.close span是.content span的子级，所以使用$（this）.parent（）来操作内容。

Answer 3

添加分组的父元素

        <div class="div_expert">
    <span class="excerpt">
    ...
        <span class="more">[more]</span>
    </span>
    <span class="content">
    ...
        <span class="close">[close]</span>
    </span>
    </div>

    $.(document).ready(function(){

       $( ".content" ).hide();
       $( ".entry-footer" ).hide();

       $('.more').on('click',  function(){

         var parent = $(this).parents('.div_expert');
         $(this).hide();
         $(parent).children('.content').show();

      });

      $('.close').on('click',  function(){

          var parent = $(this).parents('.div_expert');
          $(parent).children('.content').hide();
          $(parent).children('.more').show();
       });

   })

jQuery以此元素为目标

3 个答案: