使用onClick javascript将类添加到span元素
add class to span element with onClick javascript
我花了几个小时寻找解决方案,找到了一些答案,但不是很合适。
我有几个<span id="same-id-for-all-spans"></span>
元素,每个元素都包括一个<img>
元素。现在我想创建一个打印模板,只打印那些添加了特定类的元素。
问题是,如何通过单击向span添加类。通过这种方式,我想"标记"几个跨度,然后它们有一个底层的打印css样式,只打印具有特定*class*的跨度。重要信息:对于单个跨度,应该可以单击(添加类)和重新单击(删除类)。
非常感谢。顺致敬意,Mazey
这是所有跨度的wordpress返回,因此id相同。目前我有这个js包括:
<script type="text/javascript">
function changeid ()
{
var e = document.getElementById("nonprintable");
e.id = "printable";
}
</script>
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>';
}
?>
现在,当我点击一个跨度时,我看到它会更改id。但每次点击跨度时,它都会从上到下更改id,而不是我点击的特定跨度。
您可以使用
jQuery('span').click(function(){
jQuery(this).toggleClass('yourSpecialClass');
});
首先,不应该对所有跨度都有相同的id。相反,像这样给它们添加一个类:
<span class="selectable"></span>
然后你可以这样做:
$(function(){
$(".selectable").click(function(){
$(this).toggleClass("selected");
});
});
然后在你的功能
function getAllSelected(){
var selected = $(".selected"); // This will give you all the selected elements.
}
可以使用以下
$("span").click(function() {
if($(this).hasClass("classname"))
{
$(this).removeClass("classname");
}
else
{
$(this).addClass("classname");
}
});
添加一个onclick
处理程序并切换CSS类:
JS:
function addClass(obj) {
obj.className ? obj.className = "" : obj.className = "test";
}
CSS:
.test {
color: red;
}
HTML跨度:
<span onclick="addClass(this)">Click me!</span>
演示:http://jsfiddle.net/yXWcW/1/
编辑:没有看到jQuery标签,使用toggleClass
。
<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'))
}
})
})
您可以执行此
<span id="nonprintable" onClick="changeid(this)" >
将"this"添加到参数
你的功能是
<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>
或者你可以只使用jQuery的.thoggleClass
<span onclick="$(this).toggleClass('your-classname');">Click me!</span>
由于您有多个实例(我会重新修复类而不是id)
$('#same-id-for-all-spans').click(function(){
$(this).toggleClass('your-classname');
});
这是.toggleClass()的jQuery文档
http://api.jquery.com/toggleClass/
相关文章:
- 使用jquery将单个换行符替换为span元素
- 用于检索span元素内容的JavaScript
- 如何使动态树标题中的span元素可点击
- 如何在使用 fancybox 时从这个 span 元素制作一个 javascript 变量
- Javascript正则表达式:从头到尾将span元素与某个类进行匹配
- 找到最近的span元素并更改CSS类
- 如何为span元素添加/删除类onclick
- 如何使用 JQuery 检索具有特定类的 span 元素中的文本,该元素位于单击的对象内
- 鼠标悬停在一个 span 元素上多次触发
- 在 for 循环内分组并根据样式属性修改 span 元素
- 如何使用jQuery获取后代span元素
- 如何根据用户输入 HTML 更新多个 SPAN 元素
- 如何在单词周围添加 span 元素
- 从上一个 span 元素中获取样式
- 检查 span 元素是否包含“文本”,并且是父元素的最后一个子元素
- 尝试将 span 元素的值输入到数据库中
- 如何使用 jQuery 设置 span 元素的内部 HTML
- Span元素不从jQuery运行动画
- Javascript更改所有span元素的innerHTML
- 纯Javascript可以获取所有span元素,但可以通过定义的类进行特定的编辑