Question

所以基本上我想要一个元素，当点击它时，会触发一个jQuery脚本，该脚本可以添加或删除一个类（在这种情况下，我将添加一个更改background-image css属性的类）仅添加到该特定元素。 / p>

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 {
	width: 100%;
	display: block;
	font-family: Trebuchet MS;
	font-size: 1.1em;
	color: white;
	margin-bottom: 25px;
	padding-bottom: 3px;

	background-color: RGBA(255, 255, 255, 0.1);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 2px;

	box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     -ms-box-sizing:border-box;
}
.articleContent {
	/*height: 70px;*/
	padding: 10px 15px 5px 15px;

	box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     -ms-box-sizing:border-box;
}
.articleVotes {
}
.voteBox {
}
.articleFooter {
	width: 100%;
	height: 10px;
	content: 'more';

	background-image:url('../Images/Icons/showMoreBlack13030.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;

	transition: 0.2s ease-in-out;
}
.articleFooter:hover {
	background-image: url('../Images/Icons/chevron13040Blue.png');
}
.changeBackgroundImage {
	width: 100%;
	height: 10px;
	content: 'less';

	background-image:url('../Images/Icons/showLessBlack13030.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 15px center;

	transition: 0.2s ease-in-out;
}
.changeBackgroundImage:hover {
	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

我相信您的问题（除了＆＃34;重复ID＆＃34;问题;）），就是您选择元素的方式：

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

使用[class="articleFooter"]，你就是说＆＃34;给我一个类 IS ＆＃34; articleFooter＆＃34; （即class="articleFooter"）。。。但是，在你添加＆＃34; changeBackgroundImage＆＃34;之后，元素的类现在是＆＃34; articleFooter＆＃34; AND ＆＃34; changeBackgroundImage＆＃34; （即class="articleFooter changeBackgroundImage"），因此不匹配。

有几种方法可以解决这个问题。。

1）越多＆＃34;普通＆＃34;人们通常做这些选择的方式是使用＆＃34; id＆＃34;和＆＃34;班＆＃34; jQuery中的选择器缩写：＆＃34; #MY_ID ＆＃34;对于ids和＆＃34; .MY_CLASS ＆＃34;对于课程。例如：

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

或者，以更有效的方式：

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

在这两种情况下，if都会将该元素与该id和class匹配（但该元素也可能包含其他类）。

2）不太常见的方法，但也可以解决此问题的方法是在现有代码中使用不同的属性模式。您使用的是[attribute='value']，这意味着该属性的值必须完全您选择器中的值（因为您的选择器中的=）。

为了允许其他类在元素的类列表中，您可以使用＆＃34; contains＆＃34;属性的选择器：[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）没有.class()的功能。删除此行

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

用于添加/删除类的jQuery脚本成功添加了类，但无法删除相同的类

2 个答案: