单击按钮时更改var的值

时间：2018-10-02 10:27:56

标签： javascript jquery html

我一直试图找出如何在单击不同按钮时更改var的值。我应该能够在“绿色”和“黄色”之间进行切换，然后在单击表格的元素时设置该背景色。 我不知道为什么当我单击“绿色”按钮时它起作用但在另一个按钮上却不起作用。 提前非常感谢您！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
	
$(function(){   
	
	var color = 'blue';
	

$('button').click(function (){
    color='#33FF36';
});
	
$('button2').click(function (){
    color='#F0FF00';
});
	

  $('td').toggle( function() {
    $(this).css('background', color);
  },function(){
  $(this).css('background', 'white');
  });
} );
</script>
<style>
table
{
	border-collapse: collapse;
}
td
{
	padding: 5px;
	border: 1px solid #666666;
	cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
	<tr>
		<td width="40" height="40" align="center">11</td>
		<td width="40" height="40" align="center">12</td>
		<td width="40" height="40" align="center">13</td>
		<td width="40" height="40" align="center">14</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">21</td>
		<td width="40" height="40" align="center">22</td>
		<td width="40" height="40" align="center">
		23</td>
		<td width="40" height="40" align="center">24</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">31</td>
		<td width="40" height="40" align="center">32</td>
		<td width="40" height="40" align="center">33</td>
		<td width="40" height="40" align="center">34</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">41</td>
		<td width="40" height="40" align="center">42</td>
		<td width="40" height="40" align="center">43</td>
		<td width="40" height="40" align="center">44</td>
	</tr>
</table>
<button id="button" >Green</button>
	<button id="button2" >Yellow</button>
</body>
</html>

4 个答案:

答案 0 :(得分：1)

您没有在按钮上使用id选择器，它们需要从以下位置进行更改：

$('button').click(function (){
    color='#33FF36';
});

$('button2').click(function (){
    color='#F0FF00';
});

收件人：

$('#button').click(function (){
    color='#33FF36';
});

$('#button2').click(function (){
    color='#F0FF00';
});

这是一个可行的示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
	
$(function(){   
	
	var color = 'blue';
	

$('#button').click(function (){
    color='#33FF36';
});
	
$('#button2').click(function (){
    color='#F0FF00';
});
	

  $('td').toggle( function() {
    $(this).css('background', color);
  },function(){
  $(this).css('background', 'white');
  });
} );
</script>
<style>
table
{
	border-collapse: collapse;
}
td
{
	padding: 5px;
	border: 1px solid #666666;
	cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
	<tr>
		<td width="40" height="40" align="center">11</td>
		<td width="40" height="40" align="center">12</td>
		<td width="40" height="40" align="center">13</td>
		<td width="40" height="40" align="center">14</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">21</td>
		<td width="40" height="40" align="center">22</td>
		<td width="40" height="40" align="center">
		23</td>
		<td width="40" height="40" align="center">24</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">31</td>
		<td width="40" height="40" align="center">32</td>
		<td width="40" height="40" align="center">33</td>
		<td width="40" height="40" align="center">34</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">41</td>
		<td width="40" height="40" align="center">42</td>
		<td width="40" height="40" align="center">43</td>
		<td width="40" height="40" align="center">44</td>
	</tr>
</table>
<button id="button" >Green</button>
	<button id="button2" >Yellow</button>
</body>
</html>

答案 1 :(得分：0)

您的选择器是错误的，如果要选择ID，请使用#id：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="language" content="english">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>Table Highlighting</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(function() {
      var color = 'blue';

      $('#button').click(function() {
        color = '#33FF36';
      });

      $('#button2').click(function() {
        color = '#F0FF00';
      });

      $('td').toggle(function() {
        $(this).css('background', color);
      }, function() {
        $(this).css('background', 'white');
      });
    });
  </script>
  <style>
    table {
      border-collapse: collapse;
    }
    
    td {
      padding: 5px;
      border: 1px solid #666666;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <table width="160">
    <tr>
      <td width="40" height="40" align="center">11</td>
      <td width="40" height="40" align="center">12</td>
      <td width="40" height="40" align="center">13</td>
      <td width="40" height="40" align="center">14</td>
    </tr>
    <tr>
      <td width="40" height="40" align="center">21</td>
      <td width="40" height="40" align="center">22</td>
      <td width="40" height="40" align="center">
        23</td>
      <td width="40" height="40" align="center">24</td>
    </tr>
    <tr>
      <td width="40" height="40" align="center">31</td>
      <td width="40" height="40" align="center">32</td>
      <td width="40" height="40" align="center">33</td>
      <td width="40" height="40" align="center">34</td>
    </tr>
    <tr>
      <td width="40" height="40" align="center">41</td>
      <td width="40" height="40" align="center">42</td>
      <td width="40" height="40" align="center">43</td>
      <td width="40" height="40" align="center">44</td>
    </tr>
  </table>
  <button id="button">Green</button>
  <button id="button2">Yellow</button>
</body>

</html>

答案 2 :(得分：0)

您的代码有一些问题，例如您的ID标识符中没有＃。我不太确定您想通过切换来实现什么，但是请尝试下面的代码，看看它是否正是您想要的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="language" content="english">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>Table Highlighting</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    var color = 'blue';

    $(function() {

      $('#button').on("click", function() {
        color = '#33FF36';
        changeBg();
      });

      $('#button2').on("click", function() {
        color = '#F0FF00';
        changeBg();
      });

    });

    function changeBg() {
      $('td').css('background', color);
    }
  </script>
  <style>
    table {
      border-collapse: collapse;
    }
    
    td {
      padding: 5px;
      border: 1px solid #666666;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <table width="160">
    <tr>
      <td width="40" height="40" align="center">11</td>
      <td width="40" height="40" align="center">12</td>
      <td width="40" height="40" align="center">13</td>
      <td width="40" height="40" align="center">14</td>
    </tr>
    <tr>
      <td width="40" height="40" align="center">21</td>
      <td width="40" height="40" align="center">22</td>
      <td width="40" height="40" align="center">
        23</td>
      <td width="40" height="40" align="center">24</td>
    </tr>
    <tr>
      <td width="40" height="40" align="center">31</td>
      <td width="40" height="40" align="center">32</td>
      <td width="40" height="40" align="center">33</td>
      <td width="40" height="40" align="center">34</td>
    </tr>
    <tr>
      <td width="40" height="40" align="center">41</td>
      <td width="40" height="40" align="center">42</td>
      <td width="40" height="40" align="center">43</td>
      <td width="40" height="40" align="center">44</td>
    </tr>
  </table>
  <button id="button">Green</button>
  <button id="button2">Yellow</button>
</body>

</html>

答案 3 :(得分：0)

您可以从以下代码中使用： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
	
$(function(){   
	
	var bgcolor = 'blue';
	

$('button').click(function (){

   var x = document.getElementsByTagName('td'); 
   x[0].style.backgroundColor = "#FF0000";

});
	
$('button2').click(function (){
 
  var y = document.getElementsByTagName('tr');
  y[1].style.backgroundColor = "#FF0040";
});
	

  $('td').toggle( function() {
    $(this).css('background', bgcolor);
  }
  
  ,
  function(){
  $(this).css('background', 'white');
  });
} );
</script>


<style>
table
{
	border-collapse: collapse;
}
td
{
	padding: 5px;
	border: 1px solid #666666;
	cursor: pointer;
}
</style>
</head>
<body>
<table width="160">
	<tr>
		<td width="40" height="40" align="center">11</td>
		<td width="40" height="40" align="center">12</td>
		<td width="40" height="40" align="center">13</td>
		<td width="40" height="40" align="center">14</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">21</td>
		<td width="40" height="40" align="center">22</td>
		<td width="40" height="40" align="center">
		23</td>
		<td width="40" height="40" align="center">24</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">31</td>
		<td width="40" height="40" align="center">32</td>
		<td width="40" height="40" align="center">33</td>
		<td width="40" height="40" align="center">34</td>
	</tr>
	<tr>
		<td width="40" height="40" align="center">41</td>
		<td width="40" height="40" align="center">42</td>
		<td width="40" height="40" align="center">43</td>
		<td width="40" height="40" align="center">44</td>
	</tr>
</table>
<button id="button" >Green</button>
	<button id="button2" >Yellow</button>
</body>
</html>

相关问题
最新问题