Question

我有显示器尺寸的代码

<ul class="nav nav-pills large">
<li><a href="#19" data-toggle="tab">19</a></li>
<li><a href="#22" data-toggle="tab">22</a></li>
<li class="measure"><h4>inch <br>monitor</h4></li>
</ul>

现在我想要当用户点击图片更改的某个尺寸时...

<div class="col-md-5">
<img src="img/pic1" class="img-responsive" alt="netbox2">

这是我照片的代码..

我尝试使用这个jquery但它不起作用。

<script>
$('classname').click(function() {
    $('.filter').removeClass('classname');
    $(this).addClass('classname');
});
</script>

如何使用该数据 - toogle atributes？这是FIDDLE

我希望当我点击第一个单选按钮以仅查看fisrt图片时，在第二张其他图片上...

Answer 1

我相信你要做的是toggleClass（“classname”）。

$("img").click(function() {
     $(this).toggleClass('classname');
});

Answer 2

要获取data-toggle属性的值，只需执行此操作即可。

$("#element").attr("data-toggle");

然后用你可以做的值

$('classname').click(function() {
    dataToggle = $("#element").attr("data-toggle");
    if(dataToggle == "foo"){
        //do this
    } else {
        //do this instead
    }
});

有关.attr()

的更多信息

Answer 3

<style>
 .small {
    width:50px;
    height:50px;
 }
 .medium {
    width:150px;
    height:150px;
 }
 .large {
    width:250px;
    height:250px;
 }
</style>
<input type="radio" data-target="small" class="image-size" name="image"/> small <br/>
<input type="radio" data-target="medium" class="image-size" name="image"/> medium <br/>
<input type="radio" data-target="large" class="image-size" name="image"/> large <br/>
<img src="http://png-2.findicons.com/files/icons/524/web_2/512/facebook.png" class="img-responsive"/>
<script>
    $(function(){
        $('.image-size').on('click',function(){
        $('.img-responsive').removeClass().addClass('img-responsive').addClass($(this).data('target'));
        });

    })
</script>

以下是演示http://jsfiddle.net/mannejkumar/fbkvd/ 如果这不符合您的要求，请告诉我

点击鼠标即可更改图片

3 个答案: