Question

这是我的按钮(this is my Scipt)：

<ol class="cabin fuselage">
        <li class="row 1">
            <ol class="seats" >
                <li class="seat">           
                    <input  type="button" id="1A"  value="<?php $sql="SELECT Name FROM autoreservierung WHERE Platz='Fahrer'"; $query = mysql_query($sql,$connection);  $result=mysql_fetch_assoc($query); echo $result['Name'];?>"  />
                </li>
                <li class="seat">
                    <input type="button" id="1B" value="<?php $sql="SELECT Name FROM autoreservierung WHERE Platz='Beifahrer'"; $query = mysql_query($sql,$connection); $result=mysql_fetch_assoc($query); echo $result['Name'];?>"  />
                </li>
            </ol>
        </li>

如果值是空的，我希望颜色保持红色，如果有任何值（value =“” vs value =“ blasamplename”），我希望颜色保持绿色

有办法吗？

编辑：

我发现：

input[value=""] 
{
background: #bada55;
}

会使文本字段变为绿色，有没有办法对整个父输入进行此操作？

Answer 1

使用value的惯性，我假设是value=""

input[value=""] {
  background: red;
}

input {
  background: lightgreen;
}

ol {
  list-style: none;
}

<ol class="cabin fuselage">
  <li class="row 1">
    <ol class="seats">
      <li class="seat"> No Value
        <input type="button" id="1A" value="" />
      </li>
      <li class="seat"> With Value
        <input type="button" id="1B" value="I have a Value" />
      </li>
    </ol>
  </li>
</ol>

Answer 2

这是您的操作方式。

删除了您的php代码。请添加。链接到codepen https://codepen.io/agamj474/pen/xamRZN

$(function(){
  $('input[type="button"]').each(function(i, d){
    var el = $(d);
    var color = el.val() ? "red" :"green";
    el.parent("li").css("background", color);
  })
});

*, *:before, *:after 
{
  box-sizing: border-box;
}

html 
{
  font-size: 16px;
}

.car 
{
  margin: 20px auto;
  max-width: 500px;
}

.caption 
{
  height: 250px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-bottom: 5px solid #d8d8d8;
}
.caption:before 
{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 500px;
  width: 100%;
  border-radius: 50%;
  border-right: 5px solid #d8d8d8;
  border-left: 5px solid #d8d8d8;
}

.caption h1 
{
  width: 60%;
  margin: 100px auto 35px auto;
}

.fuselage 
{
  border-right: 5px solid #d8d8d8;
  border-left: 5px solid #d8d8d8;
  border-bottom: 5px solid #d8d8d8;
}

ol 
{
  list-style: none;
  padding: 0;
  margin: 0;
}

.seats 
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

input[type=button] 
{
	font-weight: bold;
	color: #000000;
	background-color: Transparent;
	text-align: center;
	border: none;
}

.seat,.seatlow:active
{
	background: #bada55; 
}
  



.seat  , .seatlow
{
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #F42536;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat:before, .seatlow:before 
{
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}
.seat:hover , .seatlow:hover 
{
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}

.seatlow:nth-child(1) 
{
  margin-right: 12.5%;
}
.seatlow:nth-child(2) 
{
  margin-right: 12.5%;
}
.seat:nth-child(1) 
{
  margin-right: 50%;
}

<html>
<head>
	<meta charset="ISO-8859-1">
	<title>Autoreservierung</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
	<link rel="stylesheet" href="includes/style.css">
	<script type="text/javascript">

	</script>
</head>
<body>
	<div class="car">
		 <div class="caption">
			<h1>Please select a seat</h1>
		</div>
		<ol class="cabin fuselage">
			<li class="row 1">
				<ol class="seats" >
					<li class="seat">			
						<input  type="button" id="1A"  value=""  />
					</li>
					<li class="seat">
						<input type="button" id="1B" value=""  />
					</li>
				</ol>
			</li>
<br/><br/>
			<li class="row 2">
				 <ol class="seats" >
					 <li class="seatlow">
						 <input type="button" id="2A" value="xyz" />
					 </li>
					 <li class="seatlow">
						 <input type="button" id="2B" value="xyz"/>
					 </li>
					 <li class="seatlow">
						 <input type="button" id="2C" value=""/>
					 </li>
				 </ol>
			 </li>
		 </ol>
	</div>
	<script  src="includes/index.js"></script>
</body>
</html>

<input type =“ button” />更改背景颜色

2 个答案: