Question

我正在寻找解决方案的时间并找到一些答案，但不是一个非常合适的答案。

我有几个<span id="same-id-for-all-spans"></span>元素，每个元素包含一个<img>元素。现在我想创建一个打印模板，只打印那些添加了特定类的元素。

问题是，如何通过单击将一个类添加到范围。这样我想“标记”几个跨度，然后有一个底层的print-css样式，只打印具有特定* 类 *的那些。 重要提示：应该可以单击（添加类）并重新单击（删除类）以实现单跨。

非常感谢你。最好的祝福 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。但是每次点击一个跨度而不是我点击的特定范围，它会从上到下改变它。

Answer 1

你可以使用

jQuery('span').click(function(){
  jQuery(this).toggleClass('yourSpecialClass');
});

Answer 2

首先，您的所有跨度都不应该具有相同的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.
}

Answer 3

可以使用以下

$("span").click(function() {
   if($(this).hasClass("classname"))
   {
      $(this).removeClass("classname");
   }
   else
   {
      $(this).addClass("classname");
   }

});

Answer 4

添加onclick处理程序并切换CSS类：

JS：

function addClass(obj) {
    obj.className ? obj.className = "" : obj.className = "test";
}

CSS：

.test {
    color: red;
}

HTML Span：

<span onclick="addClass(this)">Click me!</span>

演示：http://jsfiddle.net/yXWcW/1/

编辑：没有看到jQuery标记，请使用toggleClass。

Answer 5

你可以这样做

<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的.toggleClass

<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/

Answer 6

    <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'))
         }
       })
    })

使用onClick javascript将类添加到span元素

6 个答案: