1

Picture 1、Picture 1をクリックしてロードするときに、選択リストを使用してdivタグに画像をロードしたいと思います。写真 2 をクリックすると、写真 2 が読み込まれます...そして、たとえば、写真 1 が読み込まれ、[次へ] ボタンを押すと、写真 2 が読み込まれます... いろいろ試しましたが失敗しました。

<select id="mypicture" class="dropdown">
<option value="">Choose picture...</option>
<option value="1">Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>          
       </select>

これが私のコードです

4

3 に答える 3

0

img新しい を作成して に追加する必要がありますdiv。

Javascript

$(document).ready(function() {
    var pictures = ["https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQYN2T3dktBEDIuwIuosj8ulzlwGod-KabDTy2vBFC-Kht_u4ep","https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQgBLpqp92lc7JQiNszqO_ZP52OymeqShqxqcrlUDcae9UaTTLtfQ", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS99xzsoRm3g0nckrH-SjfgSe8zgeYSCgc23IqtbtocZo3sjZN2gA", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBLBxc5mMj9WbV9ghIyfpmOfVdt0qyIe21f8HBlqwvVoGgCxQucA"];
    $(".nextbutton").button({ disabled: true });

    $('.dropdown').change(function() {
        var value = $('.dropdown').val();
        if (value== 0) {
          $(".prevbutton").button({ disabled: true });
        } else if (value == 1) {

          $(".prevbutton").button({ disabled: true });
          $(".nextbutton").button({ disabled: false });
        } else if (value == 4) {
          $(".nextbutton").button({ disabled: true }); 
        } else {
          $(".nextbutton").button({ disabled: false });
          $(".prevbutton").button({ disabled: false });
        }

        //Emptys picture div and appends image
        $("#picture").empty();
        $("#picture").append($("<img/>",{src: pictures[value-1]}));
    });
$(".prevbutton").button({ disabled: true });

});
$("#next").click(function() {
  var nextElement = $('#mypicture > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#mypicture > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  $('.dropdown').trigger('change');      
  }
});

$("#prev").click(function() {
  var nextElement = $('#mypicture > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#mypicture > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  $('.dropdown').trigger('change');        
  }  
});

HTML

     <select id="mypicture" class="dropdown">
<option value="">Choose picture...</option>
<option value="1">Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>          
       </select>
<hr>
<button id="prev" class="prevbutton">Previous</button>
<button id="next" class="nextbutton">Next</button>
 <hr>
<div id="picture">
</div>

作業例: http://jsfiddle.net/Wdw4z/3/

于 2013-06-06T08:40:39.470 に答える