Question

这可能是一个原始问题，但我是JS / jQuery的新手。

我在页面上有几个不同的选择框。当选择了不同的选项时，它们中的每一个都有一个图像，即更改的图像。但是，这对于带有getElementById的一个选择框只能正常工作，但对于其中许多选项，它不适用于getElementByClassName，我也不想使用此方法，因为我读过IE8.0不支持它。有没有办法让这个工作在一个页面内的多个选择框中，而不为每个选择框使用单独的ID？

非常感谢您的帮助。这是我的代码。

<img id="color" src="content/1.png"> 
<select class="mod_select" name="colors" id="changingColor" tabindex="1" onchange="changeimg()">
<option value="content/1.png">1 thing</option>
<option value="content/2.png">2 thing</option>
<option value="content/3.png">3 thing</option>
</select>

<script type="text/javascript">
function changeimg(){
document.getElementById('color').src=document.getElementById('changingColor').value
}
</script>

编辑：我想使用select和for img的类。然后在一个div中有一个特定的选择选项，改变它旁边的img。这可能吗？

编辑2：这很有效：

$('.mod_select').on('change', function () {
     var $this = $(this);
     var img = $this.prev(); // assuming select is next to img
     img.attr('src', $this.val());
 });

然而，img不是选择的旁边，我想我应该使用prevSibling，但我不确定如何。阅读jQuery API并没有多大帮助。我将衷心感谢您的帮助！这是我的HTML：

 <img src="content/1.png"> <!-- the image that needs to be updated with new select option -->
 <p>text</p>
 <div class="moreinfo info_icon left"></div> <!-- the div that triggers qTip -->
 <div class="moreinfo_text"> <!-- this is a hidden div this that is shown by qTip with -- text: $(this).next('.moreinfo_text') -->
      <img src="content/qtip_img.jpg">
      <p>qTip text</p> 
 </div> 
 <select class="mod_select" name="colors" tabindex="1">
      <option value="content/1.png">1 thing</option>
      <option value="content/2.png">2 thing</option>
      <option value="content/3.png">3 thing</option>
 </select>

Answer 1

请查看这是否适合您：

jQuery(document).ready(function($){

   $('.mod_select').change(function() {
    $('.mod_select option:selected').each(function() {
     $('#color').attr('src', $(this).val());
    });
   });

});

您应该添加类似

的内容

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">/* <![CDATA[ */
!window.jQuery && document.write('<script type="text/javascript" src="/js/jquery.js"><\/script>')
/* ]]> */</script>

添加jQuery。

Answer 2

由于jQuery提供了一个非常强大的选择器，您可以使用类选择器来实现您的目标，如下所示：

从select。

onchange

编辑您的javascript。

$('.mod_select').on('change', function () {
    var $this = $(this);
    var img = $this.prev(); // assuming select is next to img
    img.attr('src', $this.val());
});

Answer 3

由于IE 8不支持getElementsByClassName，您可以使用Internet Explorer支持的getElementsByTagName创建自己的版本。获得元素数组后，您可以迭代它们并为change事件分配事件处理程序，而不必与html内联。完成此操作后，您需要做的就是使用previousSibling或nextSibling按类名查找图像元素并更改其来源。

以下是javascript

var select = getElementsByClassName(document.body,'mod_select');
for (var i = 0; i < select.length; i++){
    select[i].onchange = function() {
      var prevSibling = this.previousSibling;
      while(prevSibling && prevSibling.className != 'image') {
           prevSibling = prevSibling.previousSibling;
      }
      prevSibling.src = this.value;
    }
}

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName('*');
    for(var i = 0, j = els.length; i < j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

以下是显示此内容的fiddle的链接。注意：这不需要任何jQuery :)

修改

jQuery为您完成了所有繁重工作，您可以将上述代码更改为

$('.mod_select').change(function(){ $(this).prevAll('img:first').attr('src', this.value); });

这看起来是第一个图像的所有先前兄弟元素，并改变了它的来源。您可以更改选择器以包含您在第一次编辑中添加的类名。这是一个显示jQuery代码的fiddle。

选项选择onchange

3 个答案: