Question

我创建了下面的代码以用于任何帖子。它被添加到页面和类似页面。为其放置了HTML，其功能是在更改按钮名称的情况下按下该按钮时可以显示隐藏的语音，反之亦然，但是它无法正常工作。

HTML代码：

  <h3 class="h1">
                Event Name
            </h3>
            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis itaque, perferendis 
                 nesciunt eum quidem hic delectus,
                <span id="dots" class="dots">...</span>
                <span id="more" class="more">Lorem ipsum dolor sit amet consectetur 
                 adipisicing elit. Repudiandae dolore </span>
                <button type="button" class="btn btn-outline-light read " id="read">Read 
                 more</button>
                <!--Chang button-->

            </p>

jQuery代码：

 // Start read more button 
    $(document).ready(function() {
        $('.read').click(function() {
            if ($(this).hasClass('active')) {
                $(this).html('Read more').removeClass('active');
                $(this).prev('.more').slideUp("slow");
            } else
                $(this).html('Read Less').addClass('active');
            $(this).prev('.more').slideDown("slow");
        });
    });
    // start comment system

第二个是在按下按钮时将一个数字添加到按钮上，然后从另一个按钮中减去它，但是它仅适用于页面上的一个帖子，我希望它可以与同一页面上的无限多个帖子一起使用放置HTML的页面

HTML代码：

 <div id="demo">
                <button class="like">
                  <i class="fa fa-heart" aria-hidden="true" onclick="clicking();"> Like</i> 
                  <span id="slike">0</span>
              </button>
                <button class="dislike">
                  <i class="fas fa-heart-broken" aria-hidden="true" class="dislikes" 
                  onclick="clicking();"> Dislike</i> 
                  <span id="dlike">0</span>
              </button>
            </div>

jQuery代码：

// Start  like & unlike button 
               var counter = 0,
               count = 0;
           $(document).ready(function() {
           $('.like').one('click', function clicking() {
              counter += 1;
               count -= 1;
               $('#slike').text(counter);
               $('#dlike').text(count);
         });
           var coun = 0,
             counte = 0;
          $('.dislike').one('click', function click() {
            coun += 1;
            counte -= 1;
            $('#dlike').text(coun);
            $('#slike').text(count);
        });
        // End  like & unlike button 
       });

Answer 1

第一个问题

...
} else
    $(this).html('Read Less').addClass('active');
$(this).parent().find('.more').slideDown("slow");
...

应该是

...
} else {
    $(this).html('Read Less').addClass('active');
    $(this).parent().find('.more').slideDown("slow");
}
...

对于第二个问题，请看这个

// Start  like & unlike button 
    var global_like = 15;
    var global_dislike = 3;
    var counter_like = 0;
    var counter_dislike = 0;

    $(document).ready(function() {
    
      show_like();
    
      $('.like').on('click', function () {
        counter_like = (counter_like+1)%2;
        counter_dislike = 0;
        show_like();
      });
      
      $('.dislike').on('click', function () {
        counter_like = 0;
        counter_dislike = (counter_dislike+1)%2;
        show_like();
      });
      // End  like & unlike button 
    });
    
    function show_like() {
      $('#slike').text(global_like + counter_like);
      $('#dlike').text(global_dislike + counter_dislike);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="demo">
                <button class="like">
                  <i class="fa fa-heart" aria-hidden="true"> Like</i> 
                  <span id="slike">0</span>
              </button>
                <button class="dislike">
                  <i class="fas fa-heart-broken" aria-hidden="true"> Dislike</i> 
                  <span id="dlike">0</span>
              </button>
            </div>

有没有人帮助我确定错误？

1 个答案: