Question

我有以下HTML代码：

<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>

这个JQuery：

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

如果我更改stats_select_A的值，它应该只更改stats_preview_A的图像src。不幸的是，stats_preview_B的img src也发生了变化。我的代码中缺少什么部分，只有在更改选择A等时才会更改预览A？

感谢您的帮助！

Answer 1

图片不能包含内部HTML（您正在尝试做的事情）。您想要像这样更改现有图像的src属性。

    <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">
    	$(document).ready(function() {
    		$(".stats_select", this).change(function() {
    			var src = $(this).val();
    			$(".stats_preview").attr('src', src);
    		});
    	});
</script>

Answer 2

你的问题在于这行代码。

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

您正在选择两个div并更新img src。

你需要做的是选择适当的元素，然后更改img src ......试试这个。

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

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

OR

您可以单独使用此代码。

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

Answer 3

我通过在第一个select语句中添加first属性并在更改特定图像之前测试此属性来解决此问题：

<强> 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的

$(document).ready(function() {
  $(".stats_select").change(function() {
      var src = $(this).val();
      var first = false;

      if($(this).attr('first') == "true"){
          first = true;
      }

      $(".stats_preview img").eq(first == true ? 0 : 1).attr('src',src);
  });
});

这是小提琴：https://jsfiddle.net/Lzn5oL3b/1/

通过下拉选择更改div中特定图像的图像src

3 个答案: