1

我想用选择列表加载 div 标签中的图片，当我点击图片 1 时，图片 1 加载。当我点击图片 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

1

您缺少代码中的实际图像显示。

您需要做的是，在您重新配置更改事件处理程序中的所有按钮后，您需要显示一个图像。

$('div').html('<img src="'+imgUrl+'">');

并且您需要根据选择的值设置 imgUrl，或者在选项元素上设置 url，以便您可以像这样检索它：

<option value="1" data-imgurl="imgs/img1.jpg">

我已经用另一个解决方案http://jsfiddle.net/Wdw4z/1/更新了你的小提琴

于 2013-06-06T08:36:25.717 回答
1

我可以想到两种方法来做到这一点：

选项1

将img标签添加到您的 div。对于下拉列表的每次更改，您都可以相应地更改srcimg 标签的。

示例：http: //jsfiddle.net/MfPyU/

选项 2

这是我的偏好，你可以使用 JS 动态创建一个新的 img 标签。在我看来，这样做的好处是您可以向图像添加onload事件侦听器并在图像加载时显示文本，例如“正在加载”。

示例：http: //jsfiddle.net/QW4Sp/

于 2013-06-06T09:22:52.333 回答
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 回答