jQuery/Javascript在身体标记上的一堆类之间切换

我在我的HTML结构中使用不同ID的一堆跨度，我想通过每个跨度ID的
来切换身体标记上的类例如，如果我点击与ID_0跨度我想切换的身体标记
类ID_0，如果我在ID_1单击然后删除其他的人，并添加一个我点击jQuery/Javascript在身体标记上的一堆类之间切换

$(".images").click(function(){ 
 
     var ids = $(this).attr("id"); 
 
     $("body").removeClass("ID_0 ID_1 ID_2 ID_3").addClass(ids); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div class="Container"> 
 
    <span class="images" id="ID_0">ID_0</span> 
 
    <span class="images" id="ID_1">ID_1</span> 
 
    <span class="images" id="ID_2">ID_2</span> 
 
    <span class="images" id="ID_3">ID_3</span> 
 
    </div> 
 
</body> 
 
</html>

的跨度与PHP的自动生成和每个跨度有其自己的ID有可能是+15跨度喜欢，所以Im相当肯定，你可以做的方式比我的新手的jQuery更好的编码:)

来源

2017-06-20 Nippledisaster

的[JQuery的removeClass通配符]可能的复制（https://stackoverflow.com/questions/2644299/ jquery-removeclass-wildcard） – brk

下面的代码会删除与ID_开头的任何类，因为这是你的 “通配符”

$("body").removeClass(function(index, className) { 
    return (className.match(/(^|\s)ID_\S+/g) || []).join(' '); 
});

$(".images").click(function() { 
 
    var ids = $(this).attr("id"); 
 
    $("body").removeClass(function(index, className) { 
 
    return (className.match(/(^|\s)ID_\S+/g) || []).join(' '); 
 
    }); 
 
    $("body").addClass(ids); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <div class="Container"> 
 
    <span class="images" id="ID_0">ID_0</span> 
 
    <span class="images" id="ID_1">ID_1</span> 
 
    <span class="images" id="ID_2">ID_2</span> 
 
    <span class="images" id="ID_3">ID_3</span> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2017-06-20 06:09:14

非常感谢你:) – Nippledisaster

@Nippledisast呃不客气 –

据我所知，你想每次重写身体的类，是吗？我认为用vanilla JavaScript最方便。请参阅下面的代码片段。

$(".images").click(function(){ 
 
     var ids = $(this).attr("id"); 
 
     document.body.classList = ''; // Empty class list 
 
     document.body.classList += ids; // Could merge the two statements into document.body.classList = ids; 
 
     console.log(document.body.classList); // debugging 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div class="Container"> 
 
    <span class="images" id="ID_0">ID_0</span> 
 
    <span class="images" id="ID_1">ID_1</span> 
 
    <span class="images" id="ID_2">ID_2</span> 
 
    <span class="images" id="ID_3">ID_3</span> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-06-20 06:12:07 SVSchmidt

如果身体有一堂课，让我们说“蓝色”，那么你也会删除那个 –

@CarstenLøvboAndersen是的。这就是我对这个问题的理解。但我承认，我更喜欢你的回答（有我的赞赏）。 – SVSchmidt

不，我不想清空身体类，我有一堆其他CSS类使用在身体标记这将清空所有点击：D对不起，如果我的帖子混乱，HTML结构只是为了显示即时通讯尝试要做:) – Nippledisaster

你可以试试这个

$(".images").click(function(){ 
 
     var ids = $(this).attr("id"); 
 
     $("body").attr("class","").addClass(ids); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div class="Container"> 
 
    <span class="images" id="ID_0">ID_0</span> 
 
    <span class="images" id="ID_1">ID_1</span> 
 
    <span class="images" id="ID_2">ID_2</span> 
 
    <span class="images" id="ID_3">ID_3</span> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-06-20 06:13:33

对不起，这将在点击时清空body类，这将导致问题，因为我有很多css类在body标签中使用 – Nippledisaster

jQuery/Javascript在身体标记上的一堆类之间切换

回答

相关问题