[英]How do I change the color of a span, when a specific button is clicked
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <span class="vote-stars number-0" method="get"> <button id="1" class="submitUserVote"><span class="fa fa-star"></span></button> <button id="2" class="submitUserVote"><span class="fa fa-star"></span></button> </span> <br><br><br> <span class="vote-stars number-1" method="get"> <button id="1" class="submitUserVote"><span class="fa fa-star"></span></button> <button id="2" class="submitUserVote"><span class="fa fa-star"></span></button> </span>
当用户单击按钮时,我希望运行Jquery代码并更改按钮内特定跨度的颜色。
<button onclick="$(this).children('span').css('color', 'red')">
我认为足够“ onclick”来找到子对象“ span”并使用“ .css”功能更改颜色。
您对问题的评论中显示的代码可以正常工作。 您需要确保将jQuery逻辑放置在document.ready事件处理程序中,并且已将创建的click
事件附加到button
元素上。 另请注意,应避免使用内联css()
调用,而应在元素中添加预定义的CSS类。 尝试这个:
$(function() { $('button').click(function() { $(this).find('span').addClass('foo'); }); });
.foo { color: orange; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <span class="vote-stars number-0" method="get"> <button id="1" class="submitUserVote"><span class="fa fa-star"></span></button> <button id="2" class="submitUserVote"><span class="fa fa-star"></span></button> </span> <br><br><br> <span class="vote-stars number-1" method="get"> <button id="1" class="submitUserVote"><span class="fa fa-star"></span></button> <button id="2" class="submitUserVote"><span class="fa fa-star"></span></button> </span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.