3

これは初歩的な質問かもしれませんが、私は JS/jQuery は初めてです。

ページにいくつかの異なる選択ボックスがあります。それぞれの横に画像があり、異なるオプションを選択すると変更されます。ただし、これはgetElementByIdを使用した1つの選択ボックスでのみ正常に機能しますが、それらの多くではgetElementByClassNameでは機能しません。また、IE8.0でサポートされていないことを読んだため、このメソッドを使用したくありません。それぞれに個別のIDを使用せずに、1ページ内の複数の選択ボックスに対してこれを機能させる方法はありますか?

どうぞよろしくお願いいたします。これが私のコードです。

<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 の両方にクラスを使用したいと思います。次に、1 つの 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

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 に答える
1

IE 8 はサポートしていないため、Internet Explorer がサポートするgetElementsByClassNameを使用して独自のバージョンを作成できます。getElementsByTagName要素の配列を取得したら、それらを反復処理してchange、html でインラインで実行する代わりに、イベントにイベント ハンドラーを割り当てることができます。これが完了したら、previousSiblingまたはを使用してクラス名で画像要素を見つけ、nextSiblingそのソースを変更するだけです。

ここにジャバスクリプトがあります 

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 に答える