1

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

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

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

太感谢了。最好的问候梅泽

它是所有跨度的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。但它只是在每次点击跨度而不是在我点击的特定跨度上时从上到下改变它。

4

6 回答 6

5

您可以使用

jQuery('span').click(function(){
  jQuery(this).toggleClass('yourSpecialClass');
});
于 2013-06-27T13:00:49.680 回答
1

首先，您的所有跨度不应具有相同的 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.
}
于 2013-06-27T13:05:42.153 回答
0

可以使用以下

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

});
于 2013-06-27T12:58:54.447 回答
0

添加一个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它。

于 2013-06-27T12:59:29.527 回答
0

你可以这样做

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

于 2013-06-27T13:06:48.880 回答
0 
    <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'))
         }
       })
    })
于 2013-06-27T13:07:40.683 回答