jquery更改點擊div上的不透明度

我已閱讀關於此問題的各種問題，但我沒有找到針對特定情況的解決方案。我需要在點擊時更改thumbUp和thumbDown div的不透明度。爲什麼我的代碼不工作？jquery更改點擊div上的不透明度

謝謝。

HTML

<body> 
<div id="container"> 
    <div id="foto"> 
     <img src="images/feu.jpg"> 
    </div> 
    <div id="descrizione"> 
     <p class="title">Feu d'artifice</p> 
     <p>Giacomo Balla<br> 
      1916-1917<br> 
     </p> 
     <div id="likeButtons"> 
      <p>Ti piace quest'opera?</p> 
      <img id="thumbUp" src="images/thumbup.png"> 
      <img id="thumbDown" src="images/thumbdown.png"> 
     </div> 
    </div> 
    <div id="pulsanteOpera" class="pulsante" style="padding: 30px 20px 0 0;float:right;"> 
     <a href="#"></a> 
    </div>  
</div> 
</body>

CSS

#likeButtons{ 
position:relative; 
right:-50%; 
width:500px; 
overflow:hidden; 
font-weight:300; 
margin-bottom:50px; 
} 

#likeButtons p{ 
float:left; 
} 

#likeButtons img{ 
width:10%; 
margin-bottom:30px; 
padding-left:10px; 
float:left; 
cursor:pointer; 
} 

#thumbUp,#thumbDown{ 
opacity:0.6; 
}

JQuery的

<script> 
    $(document).ready(function(e) { 
     $('#pulsanteOpera').click(function(){ 
    $(this).toggleClass('pulsante').toggleClass('pulsanteRimuovi'); 
     }); 
    $('#thumbDown').click(function(){ 
      if($(this).css('opacity')==0.6) 
     $(this).css('opacity','1.0'); 
     else 
     $(this).css('opacity','0.6'); 
    }); 
    }); 
</script>

來源

2013-11-23 The Condor

而不是檢查從CSS屬性的值，你應該只是添加/刪除類 –

我建議（雖然這是非常相似的Suganthan的答案）使用toFixed()以及parseFloat()，這首先解析持有的opacity電流值中的字符串值，並且簡寫該值從不可預測（跨瀏覽器）的長值幾乎0.6到小數點後一位：

$('#thumbDown, #thumbUp').click(function(){ 
    $(this).css('opacity', function(i,o){ 
     return parseFloat(o).toFixed(1) === '0.6' ? 1 : 0.6; 
    }); 
});

JS Fiddle demo。

優先於上述方案，不過，我會建議，而不是使用特定的類來切換不透明度，而不是解析CSS屬性值本身，使用了以下內容：

$('#thumbDown, #thumbUp').click(function(){ 
    $(this).toggleClass('faded opaque'); 
});

再加上（附加）CSS：

.faded { 
    opacity: 0.6; 
} 

.opaque { 
    opacity: 1; 
}

（另外，請從#thumbUp/#thumbDown按鈕opacity: 0.6;爲使這一工作，並設置在組件上適當的風格開始，我已經增加了到faded的類別）。

JS Fiddle demo。

要修改後一種方法，以確保「選擇」一個元件取消選擇其他：

$('#thumbDown, #thumbUp').click(function(){ 
    $(this).parent().find('img').toggleClass('faded opaque'); 
});

JS Fiddle demo

以上，當然，假定你已經設置的初始類適當所以那個人有opaque班，另一個有faded班;然而，爲了簡化，只使用一個額外類：

$('#thumbDown, #thumbUp').click(function(){ 
    $(this).parent().find('img').toggleClass('opaque'); 
});

CSS：

#thumbUp, #thumbDown { 
    opacity: 0.6; /* restored the default opacity here */ 
    position: relative; 
} 
#thumbUp.opaque, #thumbDown.opaque { 
    opacity: 1; 
}

JS Fiddle demo。

要從OP解決最近的評論：

最新的編輯是不是我要找的正是，在一開始兩個div■找opacity = 0.6。如果點擊[thumbUp]就會變得不透明，但是如果我點擊thumbDown，thumbUp的不透明度必須更改爲0.6，並且thumbDown將變得不透明。

我建議從img元素去除opaque類（與我以前的建議），然後使用下列內容：

$('#thumbDown, #thumbUp').click(function(){ 
    $(this).addClass('opaque').siblings('.opaque').removeClass('opaque'); 
});

JS Fiddle demo。

來源

2013-11-23 15:10:19

好的解決方案，對我來說可讀性較差，但更緊湊;） –

它不起作用在Firefox上:( –

我現在使用你的解決方案，你能幫我實現它在Firefox中使用嗎？ –

你可能有troubl e正確讀取opacity屬性，這可能會基於瀏覽器進行更改。嘗試。

.clicked { 
    opacity: 1.0; 
} 

$('#thumbDown').click(function(){ 
    $(this).toggleClass('clicked'); 
}

此外，嘗試通過將其放置在你的CSS的底部，下方#thumbDown使.clicked一個優先事項。

來源

2013-11-23 14:53:48 beautifulcoder

不，這也行不通。 –

是的，我想你會碰到'id'作爲'class'的優先級 – beautifulcoder

很顯然，我不知道原因，讓我發現，但這是工作

$(document).ready(function(e) { 
    $('#pulsanteOpera').click(function(){ 
     $(this).toggleClass('pulsante').toggleClass('pulsanteRimuovi'); 
    }); 
$('#thumbDown').click(function(){ 
    console.log($(this).css('opacity')) 
     if(parseFloat($(this).css('opacity')).toFixed(1)==0.6) 
      $(this).css('opacity','1.0'); 
     else 
      $(this).css('opacity','0.6'); 
    }); 
});

來源

2013-11-23 15:00:55

我不知道爲什麼，但是這個工程...爲什麼這個奇怪的值在不透明？ –

@神鷹讓我檢查，在控制檯中我得到了奇怪的值 –

它不適用於Firefox :( –

jquery更改點擊div上的不透明度

回答

相關問題