CSS：針對多個元素的onclick

Question

為了使圖像適合屏幕寬度，我在外部CSS文件中使用了img {max-width：100％} 。 但是，在移動設備上（使用視口設備寬度 ），圖像顯得太小。 我希望它們中的大多數在單擊時都具有原始大小，即將其各自的maxWidth屬性更改為“ none”，如果再次單擊將其更改為“”以將尺寸恢復為100％屏幕寬度。 兩個問題：

• 可以使用純CSS做嗎？
• 是否有可能使用CSS將JavaScript例程設置為多個圖片的onclick？ 或任何其他解決方案（因為我猜CSS無法更改行為）

最糟糕的情況是，我會遇到onclick =“ func（this）;” 對於要處理的每個img元素，這都不像我想的那么優雅。 謝謝。

編輯。 好吧，還有另一種方法-加載后瀏覽所有圖像並使用javascript設置它們的onclicks ...還有更好的方法嗎？

Answer 1

這是對另一個答案的小修改， 其中考慮到您只希望在手機上獲得這種效果的事實。 當然，您可以使用媒體查詢來根據屏幕大小應用不同的樣式。 但是您仍然需要一些邏輯才能對點擊事件進行操作。

CSS

div{

    width:40px;
}

img{
    max-width:100%
}

.clicked{
       max-width:none !important;  
}  

jQuery的

$('img').click(function(){
    if(window.innerWidth < 769){
        $(this).toggleClass('clicked');
    }
});

看看我的小提琴http://jsfiddle.net/augusto1982/7uKUs/

另請注意，我正在考慮將任何小於769px的屏幕用作移動設備。 您可以將其更改為適用於確定設備是否為移動設備的任何邏輯。

這里有一個沒有jQuery的解決方案 ，要求每個圖像都添加一個onclick函數。

HTML

<div>
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);"/>
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);" />
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" onClick="toggleClass(this);" />
</div

使用Javascript

  function toggleClass(obj){
    if(window.innerWidth < 769){ 
       if(obj.className.match(/\bclicked\b/)){
          obj.className = obj.className.replace('clicked', '');

       }else{
          obj.className += " clicked";
       }
    }
  } 

單個HTML解決方案，無需在每個圖像上都進行“ onclick”操作

<div>
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" />
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" />
    <img  src="http://www.arvixe.com/images/landing_pages/jquery_hosting.png" />
</div>

<script>

    if(window.innerWidth < 769){
       var elements = document.getElementsByTagName('img'); 
       for (i = 0; i < elements.length; ++i) {
          elements[i].setAttribute('onclick','toggleClass(this)');
       }  
    }
    function toggleClass(obj){
          if(obj.className.match(/\bclicked\b/)){
             obj.className = obj.className.replace('clicked', ''); 
          }else{
             obj.className += " clicked";
          }
       }


</script>

必須在所有圖像之后添加腳本。

演示： http ： //jsfiddle.net/augusto1982/L89m5/

Answer 2

就純CSS實現而言，我能想到的最接近的方法是將每個圖像包裝在錨定標記中，然后使用標記的:active狀態更改CSS。 但是，這僅會在單擊期間更改圖像，並且單擊完成后樣式將恢復。

（示例： http : //jsfiddle.net/kGs7Q/12/ ）

對於更清潔的JavaScript實現，您可以使用事件委托-在事件冒泡到共同祖先后處理所有事件。 使用jQuery可以輕松實現：

HTML

<div class="image-wrapper">
    <img src="http://..."/>
    <img src="http://..."/>
</div>

JS

$('.image-wrapper').on('click', 'img', function(e) {
   $(this).toggleClass('clicked'); 
});

CSS

.image-wrapper img {
    max-width: 120px;
}

.image-wrapper img.clicked {
    max-width: none !important;
}

（示例： http : //jsfiddle.net/Vh7L3/3/ ）