使用jquery函數隱藏/顯示div和更改class span

我使用非常簡單的函數在單擊時隱藏整個div並顯示comments塊。使用jquery函數隱藏/顯示div和更改class span

而不是隱藏整個div，我需要做的就是保持它當它被點擊時，顯示註釋塊，但改變班級從class =「icon expand」到class =「icon abate」和只隱藏「點擊這裏發表評論或查看我們客戶的評論。」所以如果再次點擊它會做相反的事情。

這裏是我的腳本

function myfunc_showComments() { 
    if (typeof jQuery != 'undefined') { 
     $('#hidecomments').remove(); 
    } 
var commentsParams ={ 
categoryID: 'Widgets', 
streamID: '<?php echo $streamID ?>', 
containerID: 'commentsDiv', 
} 
gigya.services.socialize.showCommentsUI(conf,commentsParams); 
} 
</script> 
<!-- end #review --></div> 
<div id="hidecomments"> 
<div class="button_3" onClick="myfunc_showComments()"><span class="icon expand"></span><h2>Comment &amp; Rate this <span><?php echo $widget_title ?></span></h2><br />Click here to leave a comment or view what our customers are saying. 
</div> 
</div>

任何建議或幫助是非常appriciated

來源

2013-07-17 AlexB

我傾向於把要顯示和隱藏它自己的DIV中的「點擊這裏......」的文字：

<div id="hidecomments"> 
    <div class="button_3"><span class="icon expand"></span> 
     <h2>Comment &amp; Rate this <span><?php echo $widget_title ?></span></h2> 
     <br /> 
     <div class="instruction"> 
      Click here to leave a comment or view what our customers are saying.</div> 
    </div> 
</div>

...所以它更容易從你的JavaScript代碼中操縱。請注意，我也去掉了內嵌onClick="myfunc_showComments()"一部分，因爲你可以直接綁定的處理程序形成你的腳本如下：

$(document).ready(function() { 

    $(".button_3").click(function() { 
     var $this = $(this); 
     $this.find("span.icon").toggleClass("expand abate"); 
     $this.find("div.instruction").slideToggle(); 
    }); 

});

的.toggleClass() method添加或刪除指定的類別取決於他們是否是已經存在;它可以同時添加和刪除，因此不需要手動編寫if測試以查看當前類是什麼。

.slideToggle() method只是隱藏可見元素或顯示不可見元素的幾個選項之一。其他選項包括.toggle()或.fadeToggle()。

工作演示：http://jsfiddle.net/cRjCN/

注意，如果腳本有問題的元素後出現不需要的文件準備好包裝。

來源

2013-07-17 11:00:31 nnnnnn

好吧，這是工作的地步，現在它正在替換跨度和擴展註釋塊的類，但現在我需要添加相反，所以，如果再次點擊它應該回到默認值。 – AlexB

其實我剛剛注意到那個特定的部分確實進入了默認狀態，但是評論並沒有被隱藏並且仍然被展開 – AlexB

在我的演示中，評論被交替隱藏並且每次點擊都可見。你是在談論你在真實項目中嘗試過的東西，還是......？您_did_注意到我的解決方案涉及對html結構的輕微更改以將註釋封裝在div中（我添加的新div有'class =「instruction」'）？ – nnnnnn

使用jQuery prop做這樣的$(yourselector).prop('class','icon abate');

編輯：

$(".button_3").click(function(e) { 
    $("span.icon.expand").prop('class','icon abate'); 
});

剛纔添加的代碼塊上述內部<script>標記你的HTML body標籤內。最好在關閉</body>標記之前。

來源

2013-07-17 10:29:34

不確定在哪裏以及如何 – AlexB

@AlexB檢查我的編輯。 –

在？中使用什麼應該是「yourselector」？ – AlexB

使用jquery函數隱藏/顯示div和更改class span

回答

相關問題