Question

我正在尝试使用JQuery向左侧滑动一些内容，并使右侧的内容出现在前一个内容中。

我已经使它工作但事情是，它只有在我点击包含所有内容的div（框）时才有效。我想改变它，所以只有当我点击这些div（框）中的按钮时它才会改变。

看看这个：https://jsfiddle.net/Msiric/g8Lne34o/1/

所以我想做的是：

$(document).ready(function () {
  $('.buttons').click(function() {
    $('.box').animate({
        left: '-125%'
    }, 500, function() {
        $('.box').css('left', '150%');
        $('.box').appendTo('#inputform');
    });
    $('.box').next().animate({
        left: '25%'
    }, 500);
  });
});

请注意$('.buttons).onclick而不是$('.box').onclick。当我这样做时，代码不能按预期工作。

谢谢

Answer 1

您需要将事件绑定到buttons并为using $(this).closest(".box")

框设置动画

<强>演示

$(document).ready(function() {
  $('.buttons').click(function() {

    $(this).closest(".box").animate({
      left: '-125%'
    }, 500, function() {
      $(this).css('left', '150%');
      $(this).appendTo('#inputform');
    });

    $(this).closest(".box").next().animate({
      left: '25%'
    }, 500);
  });
});

#inputform {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.box {
  position: absolute;
  width: 100%;
  height: 100px;
  line-height: 300px;
  font-size: 50px;
  text-align: center;
  left: 25%;
  margin-left: -25%;
}

#box1 {
  background-color: #333;
}

#box2 {
  background-color: #333;
  left: 150%;
}

#box3 {
  background-color: #333;
  left: 150%;
}

#box4 {
  background-color: #333;
  left: 150%;
}

#box5 {
  background-color: #333;
  left: 150%;
}

#requestbox {
  width: 75%;
  height: 25px;
  display: block;
  float: left;
  margin-left: 3.1%;
  border-radius: 5px;
  font-size: medium;
  line-height: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  font-family: "Helvetica";
  resize: none;
}

#requestbox:focus {
  height: 100px;
}

.forms {
  width: 75%;
  height: 25px;
  display: block;
  float: left;
  margin-left: 3.1%;
  border-radius: 5px;
  font-size: medium;
  line-height: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  font-family: "Helvetica";
  resize: none;
}

.buttons {
  display: block;
  width: 18%;
  height: 31px;
  background: linear-gradient(rgb(70, 42, 24), rgb(244, 117, 33));
  border-radius: 5px;
  font-size: medium;
  line-height: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputform">
  <div id="box1" class="box">
    <textarea placeholder="Some text" id="requestbox" class="forms"></textarea>
    <button id="next" class="buttons">Next</button>
  </div>
  <div id="box2" class="box">
    <textarea placeholder="Some text" id="setbox" class="forms"></textarea>
    <button id="set" class="buttons">Set</button>
  </div>
  <div id="box3" class="box">
    <textarea placeholder="Some text" id="attachbox" class="forms"></textarea>
    <button id="attach" class="buttons">Attach</button>
  </div>
  <div id="box4" class="box">
    <textarea placeholder="Some text" id="confirmbox" class="forms"></textarea>
    <button id="confirm" class="buttons">Confirm</button>
  </div>
  <div id="box5" class="box">
    <textarea placeholder="Some text" id="publishbox" class="forms"></textarea>
    <button id="publish" class="buttons">Publish</button>
  </div>
</div>

Answer 2

像这样更改，将事件监听器添加到按钮fiddle

vector<BaseFile*> vecToSortByName = this->getChildren();

Answer 3

你尝试过使用bootstrap吗？

    <div class="row" "><!-- Sliding image row -->
        <div class="col-xs-12">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators"><!-- Indicators -->
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol><!-- /Indicators -->
            <div class="carousel-inner"><!-- Wrapper -->
              <div class="item active" ><!-- item1 -->
                <img src="images/slide1.jpg" style="width:100%"/>
                <div class="carousel-caption">
                </div>
              </div><!-- /item1 -->
              <div class="item"><!-- item2 -->
                <img src="images/slide2.jpg" style="width:100%" />
                <div class="carousel-caption">                      
                </div>
              </div><!-- /item2 -->
            </div><!-- /Wrapper -->
            <!-- Left and right controls -->
            <a class="left carousel-control " href="#myCarousel" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div><!-- /mycarousel -->
        </div><!-- /col-xs-12 -->
    </div><!-- /Sliding image row -->

您可以放置按钮，而不是放置下一张幻灯片箭头的部分。

仅在单击div中的按钮时滑动div

3 个答案: