代码不能在浏览器中工作，但可以在代码段工具中使用

时间：2018-04-08 01:56:11

标签： javascript jquery

我可以让我的代码在代码段工具中运行，但是当我点击$ 12按钮时，当我尝试在自己的浏览器中运行此代码时，不会显示任何警报。此外，如何获取警报以获取标题名称，以便显示“您已选择1克Skywalker”。

到目前为止我唯一使用的按钮是12和35。 当用户选择按钮时，我想提醒他们相应的重量以及产品名称 

$(".btn1").click(function () {
  var number = $(this).closest("tr").find(".weight1").text();
  var name =$(this).closest("h3").find(".itemName").text();
  alert("You have selected " + number + " of " + name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Herb</title>
	<link rel="stylesheet" type="text/css" href="all.css">

	<!--<script src="herb.js"></script>-->
	<script>
		$(".btn1").click(function () {
  var number = $(this).closest("tr").find(".weight1").text();
  alert(number);
});
	</script>

</head>
<body>
<div class="nav">

</div>

<div class="center">
 <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
        <li><a href="homepage.html">Home</a></li>
        <li><a href="deals.html">Deals!</a></li>
        <li>
            <a href="#">Menu ￬</a>
            <ul class="hidden">
                <li><a href="herb.html">Herb</a></li>
                <li><a href="concentrate.html">Concentrates</a></li>
                <li><a href="edible.html">Edibles</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Login ￬</a>
            <ul class="hidden">
                <li><a href="login.html">Login</a></li>
                <li><a href="signup.html">Sign up</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Social Media ￬</a>
            <ul class="hidden">
                <li><a href="https://www.facebook.com" target="_blank">Facebook</a></li>
  				<li><a href="https://www.snapchat.com/" target="_blank">Snapchat</a></li>
   				<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
   				<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
            </ul>
        </li>
    </ul>
</div>



<div class="menuwrapper">
<div class="one">
	<h3 class="itemName">Skywalker</h3>
	<img src="Skywalker.png" alt="Skywalker" height="250" width="232">
	<table>
		<tr>
			<td class="weight1">1 gram</td>
			<td class="price"><input id="button1" class="btn1" type="button" value="$12"></td>
		</tr>
		<tr>
			<td class="weight1">1/8 ounce</td>
			<td class="price"> <input class="btn1" type="button" name="item1" value="$35"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"> <input class="btn" type="button" name="item1" value="$140"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
		</tr>
	</table>
</div>

<div class="two">
	<h3>Purple Urkle</h3>
	<img src="purple_urkle.jpg" alt="purple urkle" height="250" width="232">
	<table>
		<tr>
			<td class="weight">1 gram</td>
			<td class="price"> <input class="btn" type="button" name="item1" value="$10"></td>
		</tr>
		<tr>
			<td class="weight">1/8 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$30"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$70"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$130"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$250"></td>
		</tr>
	</table>
</div>

<div class="three">
	<h3>Blueberry</h3>
	<img src="Skywalker.png" alt="Blueberry" height="250" width="232">
	<table>
		<tr>
			<td class="weight">1 gram</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
		</tr>
		<tr>
			<td class="weight">1/8 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
		</tr>
	</table>
</div>

<div class="four">
	<h3>Lucid Blue</h3>
	<img src="Skywalker.png" alt="Lucid blue" height="250" width="232">
	<table>
		<tr>
			<td class="weight">1 gram</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
		</tr>
		<tr>
			<td class="weight">1/8 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
		</tr>
	</table>
</div>

<div class="five">
	<h3>Strawberry Cough</h3>
	<img src="Skywalker.png" alt="Strawberry cough" height="250" width="232">
	<table>
		<tr>
			<td class="weight">1 gram</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
		</tr>
		<tr>
			<td class="weight">1/8 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
		</tr>
	</table>
</div>

<div class="six">
	<h3>Cactus OG</h3>
	<img src="Skywalker.png" alt="Cactus OG" height="250" width="232">
	<table>
		<tr>
			<td class="weight">1 gram</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
		</tr>
		<tr>
			<td class="weight">1/8 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
		</tr>
	</table>
</div>

<div class="seven">
	<h3>Critical Cure</h3>
	<img src="Skywalker.png" alt="Critical Cure" height="250" width="232">
	<table>
		<tr>
			<td class="weight">1 gram</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$12"></td>
		</tr>
		<tr>
			<td class="weight">1/8 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$35"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$75"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$140"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$275"></td>
		</tr>
	</table>
</div>

<div class="eight">
	<h3>Green Crack</h3>
	<img src="Skywalker.png" alt="Green Crack" height="250" width="232">
	<table>
		<tr>
			<td class="weight">1 gram</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$16"></td>
		</tr>
		<tr>
			<td class="weight">1/8 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$55"></td>
		</tr>
		<tr>
			<td class="weight">1/4 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$95"></td>
		</tr>
		<tr>
			<td class="weight">1/2 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$185"></td>
		</tr>
		<tr>
			<td class="weight">1 ounce</td>
			<td class="price"><input class="btn" type="button" name="item1" value="$350"></td>
		</tr>
	</table>
</div>
</div> <!--end container -->
</body>
</html>

2 个答案:

答案 0 :(得分：2)

这是因为当你的脚本执行时，它找不到具有.btn1类的元素，因为那个html元素还没有被创建。

在文档加载并准备就绪后，使用$（document）.ready（）来执行脚本。

用以下代码替换您的javascript：

$(document).ready(function(){
    $(".btn1").click(function () {
      var number = $(this).closest("tr").find(".weight1").text();
      alert(number);
    });
});

答案 1 :(得分：0)

除了来自@ jatinder-kumar的回答，您的jQuery脚本标记不在<head>标记中。它完全在HTML文档之外。如果你想要它，你可以使用他的代码，如果你移动到底部，在<body>标签关闭之前，以及之后的其他脚本，你可以避免使用{{1} }。

相关问题
最新问题