Görüntüyü değiştir src aşağı seçmek

Question

Aşağıdaki HTML kodu vardır:

<div class="server_details"> 
 
    <div class="heading"> 
 
    Besucher 
 
    <div class="subheading"> 
 
     <select name="stats_select_A" class="stats_select" id="stats_select_A"> 
 
     <option value="http://example1.com">in den letzten 24 Stunden</option> 
 
     <option value="http://example2.com">in der letzten Woche</option> 
 
     <option value="http://example3.com">im letzten Monat</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="stats_preview" id="stats_preview_A"> 
 
    <img src="example1.com" /> 
 
    </div> 
 
</div> 
 

 
<div class="server_details"> 
 
    <div class="heading"> 
 
    Besucher 
 
    <div class="subheading"> 
 
     <select name="stats_select_B" class="stats_select" id="stats_select_B"> 
 
     <option value="http://example1.com">in den letzten 24 Stunden</option> 
 
     <option value="http://example2.com">in der letzten Woche</option> 
 
     <option value="http://example3.com">im letzten Monat</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="stats_preview" id="stats_preview_B"> 
 
    <img src="example1.com" /> 
 
    </div> 
 
</div>

Ve bu JQuery:

\t $(document).ready(function() { 
 
\t \t $(".stats_select", this).change(function() { 
 
\t \t \t var src = $(this).val(); 
 
\t \t \t $(".stats_preview").html(src ? "<img src='" + src + "'>" : ""); 
 
\t \t }); 
 
\t });

Stats_select_A değerini değiştiririm, yalnızca stats_preview_A'nın resim src'sini değiştirmelidir. Ne yazık ki, stats_preview_B'nin img src'i de değişti. Kodumdaki hangi kısım eksiktir, A önizlemesi sadece A ve benzeri değiştiğinde değişir mi?

Yardımlarınız için teşekkürler!

Answer 1

Senin sorunun bu kod satırı ile olduğunu.

$(".stats_preview").html(src ? "<img src='" + src + "'>" : "");

Sen div'leri her ikisinin de seçilmesi ve img src güncelliyoruz. Yapmanız gereken şey

bu deneyin İşte ... img src değiştirmek ardından uygun öğeyi seçin ve olduğunu.

$('#' + currDivId).html(src ? "<img src='" + src + "'>" : "");

VEYA

yalnız bu kodu kullanabilirsiniz

var currDivId = $(this).attr('id').replace('select','preview');

.

$(this).closest(".server_details").find(".stats_preview").html(src ? "<img src='" + src + "'>" : "");

Answer 2

Resim iç HTML içeremez (ne yapmaya çalışıyorsunuz). Mevcut resmin src niteliğini bu şekilde değiştirmek istersiniz.

<div class="server_details"> 
 
     <div class="heading"> 
 
     Besucher 
 
     <div class="subheading"> 
 
      <select name="stats_select_A" class="stats_select" id="stats_select_A"> 
 
      <option value="http://example1.com">in den letzten 24 Stunden</option> 
 
      <option value="http://example2.com">in der letzten Woche</option> 
 
      <option value="http://example3.com">im letzten Monat</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     <div class="stats_preview" id="stats_preview_A"> 
 
     <img src="example1.com" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="server_details"> 
 
     <div class="heading"> 
 
     Besucher 
 
     <div class="subheading"> 
 
      <select name="stats_select_B" class="stats_select" id="stats_select_B"> 
 
      <option value="http://example1.com">in den letzten 24 Stunden</option> 
 
      <option value="http://example2.com">in der letzten Woche</option> 
 
      <option value="http://example3.com">im letzten Monat</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     <div class="stats_preview" id="stats_preview_B"> 
 
     <img src="example1.com" /> 
 
     </div> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    \t $(document).ready(function() { 
 
    \t \t $(".stats_select", this).change(function() { 
 
    \t \t \t var src = $(this).val(); 
 
    \t \t \t $(".stats_preview").attr('src', src); 
 
    \t \t }); 
 
    \t }); 
 
</script>

Answer 3

Belirli imajını değiştirmek için önce bu özellik için bir first ilk seçme açıklamaya niteliği ve test ekleyerek çözmüş:

HTML

<div class="server_details"> 
    <div class="heading"> 
    Besucher 
    <div class="subheading"> 
     <select name="stats_select stats_select_A" class="stats_select" id="stats_select_A" first="true"> 
     <option value="http://example1.com">in den letzten 24 Stunden</option> 
     <option value="http://example2.com">in der letzten Woche</option> 
     <option value="http://example3.com">im letzten Monat</option> 
     </select> 
    </div> 
    </div> 
    <div class="stats_preview" id="stats_preview_A"> 
    <img src="http://static5.techinsider.io/image/5696adc2e6183e1d008b92e8-4441-3331/15c1192_064.jpg" /> 
    </div> 
</div> 
<div class="server_details"> 
    <div class="heading"> 
    Besucher 
    <div class="subheading"> 
    <select name="stats_select_B" class="stats_select" id="stats_select_B" first="false"> 
    <option value="http://example1.com">in den letzten 24 Stunden</option> 
    <option value="http://example2.com">in der letzten Woche</option> 
    <option value="http://example22.com">im letzten Monat</option> 
    </select> 
</div> 
</div> 
<div class="stats_preview" id="stats_preview_B"> 
    <img src="http://st.automobilemag.com/uploads/sites/11/2014/01/2014-BMW-2-Series-Coupe-front-three-quarter.jpg" /> 
</div> 
</div> 

JQuery İşte keman olduğunu: mükemmel yaradı https://jsfiddle.net/Lzn5oL3b/1/