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

【问题标题】：add class to span element with onClick javascript使用 onClick javascript 将类添加到 span 元素
【发布时间】：2013-06-27 12:56:31
【问题描述】：

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

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

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

非常感谢。最好的祝福迷宫

它是所有 span 的 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 都相同？
你不能编辑他的PHP代码，它为span分配一个唯一的ID吗？您是否正在考虑在页面呈现后设置 ID？无论您要实现什么目标，我都认为这不是一个好主意
如上所述，我想在之后将类添加到跨度中，以便在打印模板中，类名决定显示哪些图像，哪些不显示。如果你有任何其他建议，我很高兴:)
我想我不需要“id”。我只需要打印模板的“类”。我只想更改跨度的样式，而不是“id”。所以当我点击一个时，我希望它有一个边框。 有人可以帮我吗？

标签： javascript jquery class onclick html

【解决方案1】：

你可以使用

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

【讨论】：

这将抓取页面上可能不需要的所有 span 元素。
嗨，首先谢谢。遗憾的是它不起作用:(我上面解释的设置是有效的，除了它只是按顺序更改 id，而不是仅仅在我单击的跨度上。那是因为我知道相同的 id 名称。但是我怎样才能整合$this 在我的代码中......这样它只会改变我实际点击的跨度的ID？

【解决方案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.
}

【讨论】：

【解决方案3】：

可以使用以下

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

});

【讨论】：

【解决方案4】：

添加 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。

【讨论】：

您好，我还有一个问题。如果我想添加“id”而不是“class”，方法如何？谢谢你。
如果你想添加一个id，你可以做obj.id = "newId"；请记住，ID 也应该是唯一的。
再次嗨 tymeJV。您能否帮助在单击时向跨度添加 style="" 标记？已经尝试过 function addClass(obj) { obj.className ？ obj.className = "" : obj.className = "noprint"; obj.css({ border: "5px solid #E3E3E3", margin: "5px", display: "inline-block" });} 但它不起作用。谢谢。
你很接近，因为你也有 jQuery，使用$(obj).css({ border: "5px solid #E3E3E3", margin: "5px", display: "inline-block" })

【解决方案5】：

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

【讨论】：

【解决方案6】：

你可以这样做

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

【讨论】：