JQuery 在新的 Google 个站点中

Question

我对 VBA 以外的任何编码都是新手，我相信它会显示出来！我被卡住了，我想我遗漏了一些明显的东西。

我正在尝试做的事情： 此代码将嵌入新的 Google 站点页面（是的，非常有限）。它显示了一堆复选框；用户选择一个或多个选项，然后单击一个按钮。单击该按钮可打开几个新页面之一，具体取决于选中的 box/boxes。所有这些都有效。

我想将选中的框数限制为每列 2 个。（后来我希望将它限制为后两列的 1/列，但现在我根本无法限制它。）我无法做到这一点。我正在尝试的不会干扰其余代码，但它仍然允许无限制检查。

我在下面包含了一个虚拟脚本；真实的脚本有其他选择选项和 URL 结果，加上更多样式细节，但除此之外与此匹配。

我试过的方法： 代码的 JQuery 位是从网上某人那里得到的，但我遵循逻辑。我试过运行该部分的代码包含在整体的不同部分；我不确定它应该去哪里，但没有任何效果。

我想知道 (1) 我的语法是否有问题，或者 (2) 我如何 calling/structuring 其余代码的 JQuery 部分。我在 FWIW Chrome 中执行此操作。

谢谢——非常感谢您的帮助！

简化的示例代码：

<head>
<meta name="scheduler" content="width=device-width, initial-scale=1">

<style>
  body {font-family:arial; background-color:white; line-height: 1.15;}

/*Handles schedule options button - how it looks, what it does when hovered over*/
#schedbutton{
background-color:#f8b019; 
}

/*Columns: 3 equal*/
.column{
 float: left;
 width: 33.33%;
 .padding: 10px;
 }  

.row:after{
 content: "";
 display: table;
 clear: both;
}

/*Responsive layout - columns will stack for narrow screens*/
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

</style>
</head>

<body>
<h1>Schedule SME Phone Support</h1>
<p><b>Directions:</b> Directions will go here.</p>

<!--divides the rest into columns-->

<div class="row">
 <div class="column" style="background-color:white;">

 <h2>Support Group A</h2>
 <p>Choose one or two main topics.</p>
 <form action="/action_page.php" method="get">
   <input type="checkbox" id="apple"> Apple<br>
   <input type="checkbox" id="asteroid"> Asteroid<br>
   <input type="checkbox" id="ambulance"> Ambulance<br>
   <input type="checkbox" id="animal"> Animal<br>
   <input type="checkbox" id="allergy"> Allergy<br>
  </form>

</div>

<div class="column" style="background-color:white"> <!--2nd column-->

<h2>Support Group B</h2>
<p>Choose one main topic.</p>

<form action="/action_page.php" method="get">
<input type="checkbox" id="brains">Brains<br>
<input type="checkbox" id="brawn">Brawn<br>
<input type="checkbox" id="bluetooth">Bluetooth<br>
</form>
</div>

<div class="column" style="background-color:white;"><!--3rd column-->
<h2>Support Group C</h2>
<p>Choose one main topic.</p>

<form action="/action_page.php" method="get">
<input type="checkbox" id="cake">Cake<br>
<input type="checkbox" id="canvas">Canvas<br>
<input type="checkbox" id="copper">Copper<br>
</form>
</div>

<!--Button to click, which triggers script based on form selections-->

<br>
<button id=schedbutton onclick="myFunction()">See Scheduling Options</button>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
/*for some reason, still cannot make this work*/
/*testing to try and limit number of ckboxes per group checked*/
$('.column:checkbox').change(function () {
var $cs = $(this).closest('.column').find(':checkbox:checked');
if ($cs.length > 2) {
this.checked = false;
}
});
</script>



<!--Script to make the button actually do what we want-->
<script type="text/javascript">

function myFunction(){

/*NB: can't make alert boxes work in New Google Sites, possibly due to iframe limitations?*/
/*Anyhow: if there IS a way to make them work, use that as the fallback instead of a separate "nope" page.*/

if (document.getElementById("apple").checked == true) {

window.open('http://www.washingtonpost.com');
} else if (document.getElementById("asteroid").checked == true) {

window.open('http://www.theonion.com');
}
else {
window.open('http://www.google.com');
}
/*obviously, add in other branches for other options, probably as switch/case not a bunch of if/then*/
}
</script>

Answer 1

具有 src= 属性的 <script> 不会运行标记之间的代码，因此您必须将它们分开到两个不同的脚本中：

例子

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.column:checkbox').change(function () {
 /* rest of your code */
});
</script>

这就是您的 jQuery 代码无法正常工作的原因之一。

另一个是您使用了错误的 select 或：.column:checkbox selects 复选框 class 为 column，例如 <input type="checkbox" class="column">.

您想 select 带有 class column 的元素中的复选框，为此您想在 column 和 [= 之间放置一个 space 22=]。分隔表示一个是父元素，另一个是某个子元素：

$('.column :checkbox')

演示

$('.column :checkbox').change(function() {
  var $cs = $(this).closest('.column').find(':checkbox:checked');
  if ($cs.length > 2) {
    this.checked = false;
  }
});

body {
  font-family: arial;
  background-color: white;
  line-height: 1.15;
}

#schedbutton {
  background-color: #f8b019;
}

.column {
  float: left;
  width: 33.33%;
  .padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="column" style="background-color:white;">

      <h2>Support Group A</h2>
      <p>Choose one or two main topics.</p>
      <form action="/action_page.php" method="get">
        <input type="checkbox" id="apple"> Apple<br>
        <input type="checkbox" id="asteroid"> Asteroid<br>
        <input type="checkbox" id="ambulance"> Ambulance<br>
        <input type="checkbox" id="animal"> Animal<br>
        <input type="checkbox" id="allergy"> Allergy<br>
      </form>

    </div>

    <div class="column" style="background-color:white">
      <!--2nd column-->

      <h2>Support Group B</h2>
      <p>Choose one main topic.</p>

      <form action="/action_page.php" method="get">
        <input type="checkbox" id="brains">Brains<br>
        <input type="checkbox" id="brawn">Brawn<br>
        <input type="checkbox" id="bluetooth">Bluetooth<br>
      </form>
    </div>

    <div class="column" style="background-color:white;">
      <!--3rd column-->
      <h2>Support Group C</h2>
      <p>Choose one main topic.</p>

      <form action="/action_page.php" method="get">
        <input type="checkbox" id="cake">Cake<br>
        <input type="checkbox" id="canvas">Canvas<br>
        <input type="checkbox" id="copper">Copper<br>
      </form>
    </div>

JQuery 在新的 Google 个站点中

JQuery in New Google Sites

html

javascript

checkbox

jquery

google-sites