Question

我正致力于制作基于网络的视频故事板，该故事板基于Twitter bootstrap构建。它由一个容器组成，包含12个图像（4个向下3个），每个图像下方有一大块文本（用于视频脚本的不同部分）。

要将脚本填充到框中，我使用的是jquery的.text方法，图像是静态链接。因为故事板一般会有超过12帧，但我只想在屏幕上一次显示很多，我在页面底部添加了一个按钮链接到下一页。我打算让那个按钮隐藏前12帧，并用新的套装替换它们。但是，我似乎无法使其发挥作用。

我将.set01类添加到前12帧的所有帧中，并且下一个按钮隐藏了.set01

HTML

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <img src="frames/1.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <img src="frames/2.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <img src="frames/3.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <img src="frames/4.png" class="img-responsive" data-toggle="modal" data-target="#modal1" />
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <div class="scriptbox set01 frame01">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <div class="scriptbox set01 frame02">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <div class="scriptbox set01 frame03"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <div class="scriptbox set01 frame04">nisi ut aliquip ex ea commodo consequat</div>
  </div>
</div>

<input type="button" class="btn btn-warning btn-large nextButton" value="Next Page"/>

JS

var populate1 = function(){
  $(".frame01").text("it worked!");
  $(".frame02").text("it worked!");
  $(".frame03").text("it worked!");
  $(".frame04").text("it worked!");
  }
$(document).ready(populate1);

$("nextButton").click(function{
$(".set01").hide();
});

populate1功能正常，但是当我添加按钮的功能时，即使我没有点击按钮，它也会破坏它。我很难过！

提前感谢您的帮助！

Answer 1

有许多事情可以做，从包装document.ready语句中的所有内容开始。但是，为了简单地解决您的问题，您在点击事件中没有在“nextButton”之前添加“句点” - 对于按钮。但是，您的事件被触发了，因为您在函数和{在同一语句中 - 之间省略了开放和关闭的parens。应该是：

var populate1 = function(){
    $(".frame01").text("it worked!");
    $(".frame02").text("it worked!");
    $(".frame03").text("it worked!");
    $(".frame04").text("it worked!");
}

$(document).ready(populate1);

$(".nextButton").click(function(){
    $(".set01").hide();
});

Answer 2

点击事件的代码错误。你忘了函数后的括号，我也会把它放在document.ready事件中（以防止搞乱DOM直到它，好吧，准备好了）

var populate1 = function(){
  $(".frame01").text("it worked!");
  $(".frame02").text("it worked!");
  $(".frame03").text("it worked!");
  $(".frame04").text("it worked!");
}

$(document).ready(function () {
    populate1();
    $(".nextButton").click(function() {
        $(".set01").hide();
    });
});

最后我建议制作＆＃39; frame01＆＃39;进入id而不是类。 Id的意思是独一无二的，你使用它们的方式使它们独一无二，我也会删除领先的＆＃34; 0＆＃34;，以防你将来需要迭代它们

jQuery＆amp; Bootstrap - 用按钮替换一组类

2 个答案: