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