3

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

我在一个页面上有几个不同的选择框。Each of them has an image next to, that is changed, when a different option is selected. 但是，这仅适用于带有 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 和 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>
4

3 回答 3

2

请看看这是否适合您：

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。

于 2013-02-05T16:22:49.270 回答
1

由于 IE 8 不支持getElementsByClassName，您可以使用getElementsByTagNameInternet Explorer 支持的版本创建您自己的版本。一旦你有了元素数组，你就可以遍历它们并为事件分配一个事件处理程序，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;
}

这是一个显示这个的小提琴的链接。注意：这不需要任何 jQuery :)

编辑

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

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

这会在所有先前的兄弟元素中查找它到达的第一个图像并更改其来源。您可以更改选择器以包含您提到的要在第一次编辑中添加的类名称。这是一个使用 jQuery 显示代码 的小提琴。

于 2013-02-05T17:44:50.850 回答
1

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

  1. 从选择中删除onchange属性。

  2. 编辑您的 JavaScript。

    $('.mod_select').on('change', function () {
    var $this = $(this);
    var img = $this.prev(); // assuming select is next to img
    img.attr('src', $this.val());
});
于 2013-02-05T16:57:48.050 回答