Question

我正在尝试使这段代码有效，我正在使用jQuery和HTML，目标是在一种幻灯片放映中显示内容（网页）（通过单击下一步按钮更改页面）。所以这就是我到目前为止编写的内容，认为它会起作用。问题是当我第一次点击下一个时它显示第二个内容（很容易因为值在开头定义）但是当我第二次点击时它不起作用！问题是函数没有使用变量content的增加值。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   </script>
<script type="text/javascript">
        jQuery(document).ready(function(){
            var content;
            content = 2;
            var mid;
            mid = "." + content;
            prevC = content - 1;
            midpC = "." + prevC;
            jQuery('.button_1').click(function(){
                jQuery(mid).fadeIn('slow');
                jQuery(midpC).fadeOut('fast');
                content++;
                return false;
            });
        });
    </script>

    <div class="1">
        <div dir="rtl" style="text-align: right;" trbidi="on">
            <div style="text-align: left;">
                TEST CONT. 1
            </div>
        </div>
        <br /></div>
    <div class="2" style="display: none;">TEST CONT. 2</div>
    <div class="3" style="display: none;">TEST CONT. 3</div>
    <div class="post-pagination"></div>
    <a class="button_1" href="#">Next</a>
    <br />
    <span style="background-color: #990000;"><br /></span>

＆＃13;

Answer 1

变量mid和midpc已设置在click函数之外，因此，每次点击按钮时，只需更改content，但mid和{ {1}}保持不动。您应该在midpc之后更新mid和midpc。

试试这个：

content++

Answer 2

这就是我如何做你需要的。请注意，这允许用户向前或向后移动，但如果您不想向后移动，只需删除该按钮。

$(document).ready(function() {
  $('.change-slide').click(function(event) {
    event.preventDefault(); // avoid navigation since your buttons are acutally links
    var $this = $(this); // cache "this"
    var $slides = $('.slide'); // get all the slides
    var isNext = $this.hasClass('next'); // check if the clicked button was "next" or "previous"
    var currentSlideIndex = $this.data('current-slide');  // get the current slide index from the button
    var newSlideIndex = isNext ? currentSlideIndex+1 : currentSlideIndex-1; // subtract or add 1 as needed 
    if (newSlideIndex >= $slides.length) newSlideIndex = 0; // reset to begining when reaching the end
    if (newSlideIndex < 0) newSlideIndex = $slides.length - 1; // reset to end when reaching the begining 
    $('.change-slide').data('current-slide', newSlideIndex); // set the current val to all buttons to use later 
    $slides.fadeOut('fast'); // fade out all slides 
    $slides.eq(newSlideIndex).fadeIn('slow'); // fade in the current slide
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="slide">
  <div dir="rtl" style="text-align: right;" trbidi="on">
    <div style="text-align: left;">
      TEST CONT. 1
    </div>
  </div>
  <br />
</div>
<div class="slide" style="display: none;">TEST CONT. 2</div>
<div class="slide" style="display: none;">TEST CONT. 3</div>
<div class="post-pagination"></div>
<a class="button_1 change-slide previous" href="#" data-current-slide="0">Previous</a>
<a class="button_1 change-slide next" href="#" data-current-slide="0">Next</a>
<br />
<span style="background-color: #990000;"><br /></span>

Answer 3

单击下一个按钮只会增加变量content，但jquery函数mid和midpC中使用的类选择器保持不变。

正确的方法是在递增变量mid后更新选择器midpC和content。

<小时/> 这是修改后的代码

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        var content;
        content = 2;
        var mid;
        jQuery('.button_1').click(function(){
            // notice following code is now inside the click function
            mid = "." + content;
            prevC = content - 1;
            midpC = "." + prevC;
            jQuery(mid).fadeIn('slow');
            jQuery(midpC).fadeOut('fast');
            content++;
            return false;
        });
    });
</script>

<div class="1">
    <div dir="rtl" style="text-align: right;" trbidi="on">
        <div style="text-align: left;">
            TEST CONT. 1
        </div>
    </div>
    <br /></div>
<div class="2" style="display: none;">TEST CONT. 2</div>
<div class="3" style="display: none;">TEST CONT. 3</div>
<div class="post-pagination"></div>
<a class="button_1" href="#">Next</a>
<br />
<span style="background-color: #990000;"><br /></span>

＆＃13;

Answer 4

我的直觉说这是关闭的问题。听起来像点击＆＃34; next＆＃34;在开头分配一次，＆＃34;转到第2页。＆＃34;然后，当您再次点击时，它仍然是＆＃34;转到第2页。＆＃34;

如何增加变量值并将其用于相同的功能？

4 个答案: