当我们点击链接时，如何在搜索框中显示图像？

Question

我使用，我用我页jQuery Mobile的1.4.2.The代码是在这里

<script> 
$(document).ready(function() { 
$(".hr").click(function(){ 
$("#imgs").show(); 
}); 
    }); 
</script> 
<div class="hr">click</div> 
<div> 
<img src="http://www.inmomundo.com/oinmonm/plugins/searchbox/images/load_blu.gif" class="imgst" style="display:none;"> 
    <select name="im_c" id="im_c" data-mini="true"> 
    <option value="1">first</option> 
    <option value="2">second</option> 
    </select> 

我想上面的图片是一个选择选项里面显示即靠近第一。链接的jsfiddle是 http://jsfiddle.net/Y8LtK/1/

Answer 1

如果我的理解正确，您希望在选择器上显示一个微调器，在按下测试（单击）按钮后给用户一些反馈。我接近它的方式是向选择器中添加一个类，并在CSS中适当地添加旋转器。使用更多的javascript事件来隐藏和显示微调，并获得您正在寻找的行为。

JS

$(document).ready(function() { 
    $(".hr").click(function() { 
    $("#im_c").addClass("showSpinner"); 
    }); 
}); 

CSS

.showSpinner { 
background: url("http://www.inmomundo.com/oinmonm/plugins/searchbox/images/load_blu.gif"); 
background-size: 1em; 
background-repeat: no-repeat; 
padding-left: 2em; 
} 

HTML

<button class="hr">Test</button> 
<div> 
<img src="http://www.inmomundo.com/oinmonm/plugins/searchbox/images/load_blu.gif" style="display:none;" width="16" height="16" name="imgstate" id="imgstate" class="imgstate" alt="cargando" /> 
<select data-mini="true" id="im_c"> 
    <option value="1">first</option> 
    <option vakue="2">second</option> 
</select> 
</div> 

更新：您不包括任何的jQuery Mobile的库

如果您选择id为的你需要的目标父div中选择成为im_c-button

$("#im_c-button").addClass("showSpinner"); 

看到这个的jsfiddle：http://jsfiddle.net/beRoberto/dgvWC/