変数値を増やして同じ関数に使う方法は？

Question

私はこのコードが動作するようにしようとしています、私はjQueryとHTMLを使用しています、目標はスライドショーの種類（次のボタンをクリックしてページを変更）でコンテンツ（Webページ）を表示することです。だからここまでは、それは動作すると思っているコード化されたものです。問題は、最初に次のコンテンツを表示すると（最初は値が定義されているため）簡単に表示されますが、2回目にクリックすると機能しません。問題は、関数が変数contentの増加した値を使用していないことです。

<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>

Answer 1

変数midとmidpcは毎度のはあなただけでなく、contentmidとmidpcがまだ残って変更ボタンをクリックし、click機能の外に設定しました。 content++の後にmidとmidpcを更新する必要があります。

---

これを試してみてください：

jQuery(document).ready(function(){ 
    var current = 1; 
    // Next 
    jQuery('.button_1').click(function(){ 
    jQuery('.' + current).fadeOut('fast'); 
    current = current % 3 + 1; 
    jQuery('.' + current).fadeIn('slow'); 
    return false; 
    }); 
    // Previous 
    jQuery('.button_2').click(function() { 
    jQuery('.' + current).fadeOut('fast'); 
    current--; 
    if (current < 1) current = 3; 
    jQuery('.' + current).fadeIn('slow'); 
    }) 
}); 

Answer 2

私の腸が、これは閉鎖の問題であると言います。 「次へ」をクリックした結果のような音は、「ページ2に行く」という冒頭に1回割り当てられます。その後、もう一度クリックすると、それはまだ「2ページに移動します」。

Answer 3

これは私は何が必要だろう方法です。これにより、ユーザーは前後に移動できますが、逆方向に移動したくない場合は、そのボタンを削除するだけです。次へボタンをクリック

$(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 4

のみ可変contentをインクリメントするが、jQueryの機能midとmidpCで使用されるクラスセレクタはそのままされます。

正しい方法は、変数contentをインクリメントした後にセレクタmidとmidpCを更新することです。

---

ここ が変更されたコード

<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>