jquery - jquery 更改图像 src 和 div 位置 onselect

Question

我有一个选择框，我希望 onchange 一些我拥有的图像会改变，而其他一些 div 会改变它们（css：top，right 值）我如何用 Jquery 做到这一点？

我现在有这段代码（不在 jquery 中，它不会改变顶部，其他 div 的右侧..）

<script type="text/javascript">
    function swapImage(){
        var image = document.getElementById("img");
        var dropd = document.getElementById("text");
        image.src = dropd.value;    
    };
</script>

<select id="text" onChange="swapImage()" style="width:70px;">
    <option value="images/1.jpg">1</option>
    <option value="images/2.jpg">2</option>
    <option value="images/3.png">3</option>
</select>

Answer 1

示例 HTML

<select id='my-select-box'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

使用 jQuery 的 JavaScript

$('#my-select-box').on('change', doStuff());

function doStuff(){
  //change an image
  //move some divs
}

如果您愿意，也可以使用.change() 函数作为快捷方式。

Answer 2

这是您的 html 工作（您可以检查图像元素以查看src正在发生的变化）：http: //jsfiddle.net/69GNC/1/

$("#text").on("change", function() {
    $("#img").prop("src", $(this).val());
    // you could also add something like this for your other req.:
    // $("#otherDiv").css({"top": "10px", "left": "15px" });
});

注意：您需要确保在到达此代码时可以访问您的 dom，因此您可以将其包装在$document.ready(function() { [code here] });