更改JQuery以影响按钮的颜色，而不是背景的颜色？

时间：2019-01-12 19:11:16

标签： jquery html css

只是想知道如何更改JQuery代码，以使实际按钮的背景颜色变为橙色，而不是其背后元素的背景？

谢谢

@media only screen and (max-width : 700px ){
    .homepagemembershippricingtable {
        width: 100%;
		#margin-left: 10%;
        margin-bottom: 10px;
    }
}

.homepagemembershippricingtable {
	margin-top: 3%;
	border-spacing: 25px 0px;
	margin-bottom: 3%;
}

* {
    box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.homepagemembershippricingtable {
    float: left;
    width: 33.3%;
    padding: 12px;
}

.homemembershiptableheader {
	list-style-type: none;
    background-color: #29303f;
    color: #47ca6b;
    font-size: 40px;
	font-family: 'Fjalla One', sans-serif;
	transform: scale(1,1.1);
	padding: 3%;
	text-align: center;
	text-transform: uppercase;
	font-weight: 300;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	letter-spacing: 0.6px;
}

.homemembershiptableprice {
	list-style-type: none;
	color: #555;
	font-size: 15px;
	font-weight: 600;
	padding:3%;
	text-align: center;
}

.membershippricetext {
	list-style-type: none;
	font-size: 33px;
	color: #2f394d;
}

.homemembershiptablecredits {
	list-style-type: none;
	background-color: #f2f2f2;
	color: #555;
	font-size: 16px;
	font-weight: 600;
	padding: 4%;
	text-align: center;
}

@media only screen and (max-width : 700px ){
    .homepagemembershippricingtable {
        width: 100%;
		#margin-left: 10%;
        margin-bottom: 10px;
    }
    
    .hom
}

.membershipchoosebutton {
	background-color: #2f394d;
	padding: 5%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	text-align: center;
    list-style: none;
}

.homepagemembershippricingtable {
    margin-bottom: 0;
    margin-bottom: 60px;
}

@media only screen and (max-width : 700px ){
    .homepagemembershippricingtable {
        margin-bottom: 10px;
    }
    
    .membershipoptionshometitle {
        margin-bottom: 30px;
        margin-top: 40px;
    }
    
    .homepagesignupbutton {
        margin-top: 40px
    }
    
    .welcomephototextsection h1 {
        margin-bottom: 10px;
    }
}

.chooseemembershipbutton {
	background-color: #2f394d;
	font-size: 16px;
	border: 1px solid #47ca6b;
	display: inline-block;
	padding: 10px 20px;;
	font-weight: 600;
	text-decoration: none;
    color: #47ca6b;
	border-radius: 10px;
	align-content: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ExamMarked</title>
<link rel="stylesheet" type="text/css" href="style6.css">
<link rel="shortcut icon" type="image/png" href="iconlogo.png">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
$(document).ready(function(){

  $('.chooseemembershipbutton').click(function(){
    $('li.membershipchoosebutton').removeClass('bgGreen');
    $(this).parent().addClass('bgGreen');
  });

}); //end document.ready
</script>

<style>
    .bgGreen {
        background-color: orange;
    }
</style>

	
<div class="membershipoptionstablecontainer">
  <div class="homepagemembershippricingtable">
  <ul class="price">
    <li class="homemembershiptableheader">Silver</li>
    <li class="homemembershiptableprice"><p class="membershippricetext">£10</p> / month</li>
    <li class="homemembershiptablecredits">3 credits, monthly</li>
    <li class="membershipchoosebutton"><button type="button" class="chooseemembershipbutton" onclick="">Choose</button></td>
  </ul>
</div>

<div class="homepagemembershippricingtable">
  <ul class="price">
    <li class="homemembershiptableheader">Gold</li>
    <li class="homemembershiptableprice"><p class="membershippricetext">£10</p> / month</li>
    <li class="homemembershiptablecredits">3 credits, monthly</li>
    <li class="membershipchoosebutton"><button type="button" class="chooseemembershipbutton" onclick="">Choose</button></td>
  </ul>
</div>

“ Lorem ipsum dolor坐满了，奉献了上流社会，seu do eiusmod tempor indicidunt ut labour et dolore magna aliqua。 “不愿意，在偶然的情况下犯下了罪魁祸首。”

“ Lorem ipsum dolor坐满了，奉献了上流社会，seu do eiusmod tempor indicidunt ut labour et dolore magna aliqua。 “不愿意，在偶然的情况下犯下了罪魁祸首。”

1 个答案:

答案 0 :(得分：0)

此：

$（this）.parent（）。addClass（'bgGreen'）;

只需更改为：

$（this）.addClass（'bgGreen'）;

这样，代码不会更改按钮的父容器，而是按钮本身。

$(document).ready(function(){

  $('.chooseemembershipbutton').click(function(){
    //Choose the button specific class and remove all orange backgrouns
    $('.chooseemembershipbutton').removeClass('bgGreen');
    
    //This line needs to change so it doesn't add the class to the button's parent:
    //Set this button now
    $(this).addClass('bgGreen');
  });

}); //end document.ready
@media only screen and (max-width : 700px ){
    .homepagemembershippricingtable {
        width: 100%;
		#margin-left: 10%;
        margin-bottom: 10px;
    }
}

.homepagemembershippricingtable {
	margin-top: 3%;
	border-spacing: 25px 0px;
	margin-bottom: 3%;
}

* {
    box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.homepagemembershippricingtable {
    float: left;
    width: 33.3%;
    padding: 12px;
}

.homemembershiptableheader {
	list-style-type: none;
    background-color: #29303f;
    color: #47ca6b;
    font-size: 40px;
	font-family: 'Fjalla One', sans-serif;
	transform: scale(1,1.1);
	padding: 3%;
	text-align: center;
	text-transform: uppercase;
	font-weight: 300;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	letter-spacing: 0.6px;
}

.homemembershiptableprice {
	list-style-type: none;
	color: #555;
	font-size: 15px;
	font-weight: 600;
	padding:3%;
	text-align: center;
}

.membershippricetext {
	list-style-type: none;
	font-size: 33px;
	color: #2f394d;
}

.homemembershiptablecredits {
	list-style-type: none;
	background-color: #f2f2f2;
	color: #555;
	font-size: 16px;
	font-weight: 600;
	padding: 4%;
	text-align: center;
}

@media only screen and (max-width : 700px ){
    .homepagemembershippricingtable {
        width: 100%;
		#margin-left: 10%;
        margin-bottom: 10px;
    }
    
    .hom
}

.membershipchoosebutton {
	background-color: #2f394d;
	padding: 5%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	text-align: center;
    list-style: none;
}

.homepagemembershippricingtable {
    margin-bottom: 0;
    margin-bottom: 60px;
}

@media only screen and (max-width : 700px ){
    .homepagemembershippricingtable {
        margin-bottom: 10px;
    }
    
    .membershipoptionshometitle {
        margin-bottom: 30px;
        margin-top: 40px;
    }
    
    .homepagesignupbutton {
        margin-top: 40px
    }
    
    .welcomephototextsection h1 {
        margin-bottom: 10px;
    }
}

.chooseemembershipbutton {
	background-color: #2f394d;
	font-size: 16px;
	border: 1px solid #47ca6b;
	display: inline-block;
	padding: 10px 20px;;
	font-weight: 600;
	text-decoration: none;
    color: #47ca6b;
	border-radius: 10px;
	align-content: center;
}

.bgGreen {
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>ExamMarked</title>
<link rel="stylesheet" type="text/css" href="style6.css">
<link rel="shortcut icon" type="image/png" href="iconlogo.png">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">


<div class="membershipoptionstablecontainer">
  <div class="homepagemembershippricingtable">
  <ul class="price">
    <li class="homemembershiptableheader">Silver</li>
    <li class="homemembershiptableprice"><p class="membershippricetext">£10</p> / month</li>
    <li class="homemembershiptablecredits">3 credits, monthly</li>
    <li class="membershipchoosebutton"><button type="button" class="chooseemembershipbutton" onclick="">Choose</button></td>
  </ul>
</div>

<div class="homepagemembershippricingtable">
  <ul class="price">
    <li class="homemembershiptableheader">Gold</li>
    <li class="homemembershiptableprice"><p class="membershippricetext">£10</p> / month</li>
    <li class="homemembershiptablecredits">3 credits, monthly</li>
    <li class="membershipchoosebutton"><button type="button" class="chooseemembershipbutton" onclick="">Choose</button></td>
  </ul>
</div>

相关问题
最新问题