使用多个选择更改图像src

Question

我想使用多个选择来更改图像。

参考QUESTION 结构与上面的代码完全相同。

但使用<select>和<option>并不适合我的情况。 我想改用<ul>和<li>（或<div>和<a>）。 我试图用它编辑，但javascript无法识别该值。

我是javascript的新手。 我不知道如何修改代码。 请多多帮助，谢谢。

这是html：

<img id="imageToSwap" src="img/red.jpg">

<select id="colour" onChange="swapImage()">
    <option value="red">Red</option>
    <option value="green">Green</option>
</select>

<select id="size" onChange="swapImage()">
    <option value="small">Small</option>
    <option value="large">Large</option>
</select>

脚本：

<script type="text/javascript">
    function swapImage(){
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;

        image.src = "img/" + size + "_" + color + ".jpg";
    };
</script>

Answer 1

你可以用不同的方式做到这一点。我将建议使用数据属性来存储src值。考虑一下这段代码。

HTML：

<img id="imageToSwap" src="http://lorempixel.com/100/100/nature/4">

<ul class="select">
    <li class="option active" data-value="http://lorempixel.com/100/100/nature/4">Red</li>
    <li class="option" data-value="http://lorempixel.com/100/100/nature/1">Green</li>
    <li class="option" data-value="http://lorempixel.com/100/100/nature/2">Yellow</li>
</ul>

和JS：

var $image = $('#imageToSwap');

$('.select').on('click', '.option', function() {
    $image.prop('src', $(this).data('value'));
    $(this).addClass('active').siblings().removeClass('active');
});

演示：http://jsfiddle.net/8f669/

UPD支持多个选择

var $image = $('#imageToSwap');

var $selects = $('.select').on('click', '.option', function() {
    $(this).addClass('active').siblings().removeClass('active');

    var src = 'http://lorempixel.com/{size}/{size}/{group}/{image}';
    $selects.each(function() {
        src = src.replace(RegExp('\\{' + $(this).data('name') + '\\}', 'g'), $(this).find('.active').data('value'));
    });
    $image.prop('src', src);
});

注意如何构造src。 'http://lorempixel.com/{size}/{size}/{group}/{image}'。它具有与选择列表对应的令牌。它带来了最大的灵活性。您可以使用正确的data-name="xxx"属性添加新的选择列表，在这里，您可以在src网址中使用令牌{xxx}。

演示：http://jsfiddle.net/8f669/2/

Answer 2

这支持多种条件。您应该在ul的data-selected中设置默认值（如果data-selected为空，则应在swapImage函数中设置）。

演示：http://jsfiddle.net/t49jQ/1/

CSS

li {
    cursor: pointer;
}

HTML：

<img id="imageToSwap" src="">

<ul id="color" data-selected=''>
    <li data-color='red' onClick="swapImage(this,1)">Red</li>
    <li data-color='green' onClick="swapImage(this,1)">Green</li>
</ul>

<ul id="size" data-selected=''>
    <li data-size='small' onClick="swapImage(this,2)">Small</li>
    <li data-size='big' onClick="swapImage(this,2)">Big</li>
</ul>

JS：

function swapImage(el,type){

        var el_color = document.getElementById("color");
        var el_size = document.getElementById("size");
        var image = document.getElementById("imageToSwap");

        if (type == 1) {    
            el_color.setAttribute('data-selected',el.getAttribute('data-color'));

        } else if (type == 2) {
            el_size.setAttribute('data-selected', el.getAttribute('data-size'));
        }

        image.src = "img/" + el_size.getAttribute('data-selected') + "_" + el_color.getAttribute('data-selected') + ".jpg";

    };

Answer 3

这是使用ul li和jquery

的代码

<img src="" id="image_tag"/>

 <ul id="test">
  <li data-image="img/test.jpg">Image 1</li>
  <li data-image="img/test1.jpg">Image 2</li>
</ul>


 <script>
   $(function(){
     $('#test li').click(function(){
         $('#image_tag').attr('src',$(this).data('image'));
     });
   });
 </script>