使用 onClick javascript 将类添加到跨度元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17343806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add class to span element with onClick javascript
提问by Mazey
I'm searching hours for an solution and found some answers, but not a quite fitting one.
我正在寻找解决方案的时间并找到了一些答案，但不是很合适。
I have several <span id="same-id-for-all-spans"></span>elements with each of them including one <img>element.
Now I want to create a print template, to only print those elements which have a specific classadded to it.
我有几个<span id="same-id-for-all-spans"></span>元素，每个元素都包括一个<img>元素。现在我想创建一个打印模板，只打印那些添加了特定类的元素。
The question is, how can I add a classto a span by clicking on it. This way I want to "mark" several spans which then have an underlying print-css style to only print the ones with the specific*class*. Important:It should be possible to click (add class) and reclick (delete class) for single spans.
问题是，如何通过单击将类添加到跨度。通过这种方式，我想“标记”几个跨度，然后这些跨度具有一个底层的 print-css 样式，以仅打印具有特定 *类* 的那些。 重要提示：对于单个跨度，应该可以单击（添加类）和重新单击（删除类）。
Thank you so much. Best Regards Mazey
太感谢了。最好的问候马齐
its a wordpress return for all the spans, so same id. at the moment I have this js included:
它是所有跨度的 wordpress 返回值，因此 ID 相同。目前我已经包含了这个js：
<script type="text/javascript">
function changeid ()
{
var e = document.getElementById("nonprintable");
e.id = "printable";
}
</script>
and the wordpress code looks like this:
wordpress 代码如下所示：
<?php
$args = array('post_type' => 'attachment', 'post_parent' => $post->ID, 'orderby' => 'menu_order', 'order' => 'ASC');
$attachments = get_children($args);
foreach ( $attachments as $attachment_id => $attachment ) {
echo '<span id="nonprintable" onClick="changeid()" >';
echo wp_get_attachment_image( $attachment->ID, 'large' );
echo '</span>';
}
?>
Right now when I click on a span I see that it changes the id. But it changes it just top to bottom with every click on a span and not on a specific span I click.
现在，当我点击一个跨度时，我看到它改变了 id。但是它会在每次点击跨度时从上到下改变它，而不是在我点击的特定跨度上。
回答by Bhushan Kawadkar
you can use
您可以使用
jQuery('span').click(function(){
jQuery(this).toggleClass('yourSpecialClass');
});
回答by reggaemahn
First of all, you should not have the same id for all your spans. Instead add a class to all of them like this:
首先，您不应该对所有跨度使用相同的 id。而是像这样为所有这些添加一个类：
<span class="selectable"></span>
Then you can do this:
然后你可以这样做：
$(function(){
$(".selectable").click(function(){
$(this).toggleClass("selected");
});
});
And then in your function
然后在你的函数中
function getAllSelected(){
var selected = $(".selected"); // This will give you all the selected elements.
}
回答by Jeandre Pentz
could use the following
可以使用以下
$("span").click(function() {
if($(this).hasClass("classname"))
{
$(this).removeClass("classname");
}
else
{
$(this).addClass("classname");
}
});
回答by tymeJV
Add an onclickhandler and toggle CSS classes:
添加onclick处理程序并切换 CSS 类：
JS:
JS：
function addClass(obj) {
obj.className ? obj.className = "" : obj.className = "test";
}
CSS:
CSS：
.test {
color: red;
}
HTML Span:
HTML 跨度：
<span onclick="addClass(this)">Click me!</span>
Demo: http://jsfiddle.net/yXWcW/1/
演示：http: //jsfiddle.net/yXWcW/1/
Edit: Didn't see the jQuery tag, use toggleClassfor that.
编辑：没有看到 jQuery 标签，请使用toggleClass它。
回答by Shawn G.
You can do this
你可以这样做
<span id="nonprintable" onClick="changeid(this)" >
added "this" to arguments
在参数中添加了“this”
and your function would be
你的功能是
<script type="text/javascript">
function changeid (e){//added e to accepted arguments
e.id = "printable";
//e is the element so you are only changing that one elements id
}
</script>
or you can just use jQuery's .toggleClass
或者你可以只使用 jQuery 的 .toggleClass
<span onclick="$(this).toggleClass('your-classname');">Click me!</span>
Since you have multiple instances (I would recomend classes instead of id's)
因为你有多个实例（我会推荐类而不是 id 的）
$('#same-id-for-all-spans').click(function(){
$(this).toggleClass('your-classname');
});
Here is the jQuery doc for .toggleClass()
这是 .toggleClass() 的 jQuery 文档
回答by manraj82
<div class="items">
<span class="item">Click Item 1</span>
<span class="item">Click Item 2</span>
<span class="item">Click Item 3</span>
</div>
<div class="btn-getSelectedItems">Get Selected Items</div>
$(function(){
$('.items .item').click(function(){
$(this).toggleClass('selected');
})
$('.btn-getSelectedItems').click(function(){
if($('.items .selected').length){
console.log($('.items .selected'))
}
})
})
