更改圖片點擊

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> 

如何使用該數據到Google Analytics的屬性？ 這裏是FIDDLE

我想，當我在第一個單選按鈕，單擊只看到最前一頁的圖片，在第二其它圖片...

Answer 1

我相信你正在嘗試做的是toggleClass（「類名」）。

$("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/ 讓我知道如果這不符合您的要求