jQuery腳本添加/刪除類成功添加類，但不能刪除相同的類

Question

因此，本質上我想要一個元素，當點擊時，觸發一個jQuery腳本，添加或刪除類（在這種情況下，我添加一個將background-image css屬性更改爲只有該特定元素的類）。

function readMore() { 
 
    var subID = event.target.id; 
 
    var footerTarget = $('[id='+subID+'][class="articleFooter"]'); 
 
    var newTarget = $('[id='+subID+'][class="showArticlePara"]'); 
 

 
    newTarget.toggle(); 
 

 
    var footerTarget = $('[id='+subID+'][class="articleFooter"]'); 
 

 
    if (newTarget.css("display") == "block") { 
 
     footerTarget.addClass("changeBackgroundImage"); 
 
    } 
 
    else { 
 
     footerTarget.removeClass("changeBackgroundImage"); 
 
    } 
 

 
    alert(footerTarget.class()); 
 
} 
 

 
$(document).ready(function() { 
 
});

.articleSection { 
 
\t width: 100%; 
 
\t display: block; 
 
\t font-family: Trebuchet MS; 
 
\t font-size: 1.1em; 
 
\t color: white; 
 
\t margin-bottom: 25px; 
 
\t padding-bottom: 3px; 
 

 
\t background-color: RGBA(255, 255, 255, 0.1); 
 
\t box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
\t border-radius: 2px; 
 

 
\t box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
} 
 
.articleContent { 
 
\t /*height: 70px;*/ 
 
\t padding: 10px 15px 5px 15px; 
 

 
\t box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
} 
 
.articleVotes { 
 
} 
 
.voteBox { 
 
} 
 
.articleFooter { 
 
\t width: 100%; 
 
\t height: 10px; 
 
\t content: 'more'; 
 

 
\t background-image:url('../Images/Icons/showMoreBlack13030.png'); 
 
\t background-size: contain; 
 
\t background-repeat: no-repeat; 
 
\t background-position: center center; 
 

 
\t transition: 0.2s ease-in-out; 
 
} 
 
.articleFooter:hover { 
 
\t background-image: url('../Images/Icons/chevron13040Blue.png'); 
 
} 
 
.changeBackgroundImage { 
 
\t width: 100%; 
 
\t height: 10px; 
 
\t content: 'less'; 
 

 
\t background-image:url('../Images/Icons/showLessBlack13030.png'); 
 
\t background-size: contain; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 15px center; 
 

 
\t transition: 0.2s ease-in-out; 
 
} 
 
.changeBackgroundImage:hover { 
 
\t background-image: url('../Images/Icons/chevron13040BlueRotated.png'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="articleSection"> 
 
    <div class="articleContent"> 
 
     <h2>Exciting new study shows that in any male group, at least one is gay</h2> 
 
     <div class="showArticlePara" id="one"> 
 
      <p> 
 
       I really hope it's Luke, he's cute af. 
 
      </p> 
 
     </div> 
 
    </div> 
 
    <div class="articleVotes"> 
 
     <div class="voteBox"></div> 
 
    </div> 
 
    <div class="articleFooter" id="one" onclick="readMore()"></div> 
 
</div>

所以當我點擊.articleFooter與id=subID我已經與它改變使用簡單的jQuery toggle()顯示屬性相關聯的段落的顯示。我嘗試過使用toggleClass()，但這隻會添加該類，並不會在第二次點擊時將其刪除。

我終於嘗試的if/else聲明，檢查如果先前影響款display: none和添加或刪除基於結果的類，但再次這只是成功添加類，但未能在除去同一類第二次點擊。

感謝您的任何建議和/或幫助。

的jsfiddle：https://jsfiddle.net/hm3y3848/

Answer 1

我相信您的問題（除了「副本ID」的問題;）），是你如何選擇你的元素：

var footerTarget = $('[id='+subID+'][class="articleFooter"]'); 

使用[class="articleFooter"]，你說：「讓我的元素，其類IS「articleFooter」（即，class="articleFooter"）。 。 。但是，你已經添加了「changeBackgroundImage」後，班裏的元素現在是「articleFooter」 和「changeBackgroundImage」（即class="articleFooter changeBackgroundImage"），所以它不匹配。

有一對夫婦的方式來解決這個問題。 。 。

1）更多的「共同」方式，人們通常做這些類型的選擇是使用jQuery中的「ID」和「類」選擇速記：「#MY_ID」的ID和「.MY_CLASS 「上課。例如：

$("#" + subID + ".articleFooter") 

或者，以更有效的方式：

$("#" + subID).filter(".articleFooter") 

在這兩種情況下，如果將兩者是id和class匹配元素（雖然，元素也可能有其他類） 。

2）不太常用的方式，但什麼也解決此問題，在現有的代碼使用不同的屬性模式。您正在使用[attribute='value']這意味着該屬性的值必須準確在您選擇（因爲在你選擇的=）的值。

爲了允許其他類位於元素的類列表中，可以對屬性使用「contains」選擇器：[attribute*='value']這意味着該屬性的值必須包含但不限於值在選擇器中。

要麼應該工作，但第一種方法是你會看到更多的時候，因爲速記是更容易輸入。 ;）

並請解決您的ID重複問題，或者你會繼續看到其他的問題。 ：D

Answer 2

的readMore()功能具有第一線

event.target.id 

從那裏您會收到event對象？這被投擲ReferenceError: event is not defined

溶液1

1）通id而調用readMore功能在天然方式

<div class="articleFooter" id="one" onclick="readMore(this.id)"></div> 

2）通它在參數和改變第一線中的函數

function readMore(id) { 
    var subID = id; 
    . 
    . 
} 

3）沒有作爲的功能。刪除此行

alert(footerTarget.class()); 

解決方案2

另一種方法是使用的處理事件的jQuery的方式，因爲你已經在使用jQuery

<div class="articleFooter" id="one"></div> 

這裏是JS

$(document).ready(function() { 
    $(".articleFooter").click(function() { 
     var subID = $(this).attr('id'); 
     var footerTarget = $('[id=' + subID + '][class="articleFooter"]'); 
     var newTarget = $('[id=' + subID + '][class="showArticlePara"]'); 

     newTarget.toggle(); 

     var footerTarget = $('[id=' + subID + '][class="articleFooter"]'); 

     if (newTarget.css("display") == "block") { 
      footerTarget.addClass("changeBackgroundImage"); 
     } else { 
      footerTarget.removeClass("changeBackgroundImage"); 
     } 
    }); 
}); 

Working Demo