如何使用jQuery/AJAX更改模式的文本？
如何使用jQuery/AJAX更改模式的文本？
提问于 2015-12-11 04:35:31
虽然这个问题以前已经被问过几次了，但似乎没有一个答案对我有帮助。所以我再问一遍...
我正在建立一个网站的前端，没有后端(没有服务器调用等)。我有一个显示内容的模式，有一个next和一个close按钮。我最初的设计是，当按下next按钮时，它会关闭打开的模式，并打开一个具有不同内容的新模式。我觉得这看起来不专业。我喜欢当用户按下next按钮时，它会获取下一个模式的内容并将其显示在打开的模式上，而不必保持打开和关闭模式。然而，我不知道具体是怎么做到的。我假设这可以通过jQuery和AJAX来实现。我会附上我的代码。任何反馈都是值得感谢的。
这是开放模式。当用户点击next时，我希望将<h4 class="modal-title>和<div class="modal-body>的内容替换为下一个模式。
<div class="modal fade protein-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- PROTEIN MODAL START-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> Lean Protien </h4><!--CHANGE THIS WITH NEXT MODAL-->
</div>
<div class="modal-body"><!--CHANGE THIS WITH NEXT MODAL-->
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-1" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- PROTEIN MODAL END-->h4和div应替换为此模式的h4和div
<div class="modal fade colorful-culinary-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- COLORFUL-CULINARY MODAL START-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Colorful Carbohydrates</h4>
</div>
<div class="modal-body">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-2" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- COLORFUL-CULINARY MODAL END-->目前，我只是打开和关闭模态，这是多余的。简单地替换文本会更有效率。
$(document).ready(function()
{
$('.colorful-culinary-button').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.protein-button').click(function()
{
$('.protein-modal').modal('show');
});
$('.fat-button').click(function()
{
$('.fat-modal').modal('show');
});
$('.btn-next-slide-1').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.btn-next-slide-2').click(function()
{
$('.fat-modal').modal('show');
});
$('.diet-builder-button').click(function()
{
$('.diet-builder-modal').modal('show');
});
});回答 2
Stack Overflow用户
发布于 2015-12-11 04:53:28
你可以按照这个例子来做(需要适应你的代码，但是这个想法应该是可行的)。
HTML (模式)：
<div id="container">
<p>this is the first text in the modal</p>
</div>
<input id="nextBtn" type="button" value="NEXT"/>jQuery：
$(document).ready(function() {
var objPos = 1;
var ajaxReturnObj = ["this is the first text in the modal","this is the second text in the modal","this is the third text in the modal"];
$('#nextBtn').click(function(){
$('#container p').text(ajaxReturnObj[objPos]);
objPos++;
});
});Stack Overflow用户
发布于 2015-12-11 05:27:56
如果您有一个静态页面，并且想要在不关闭next按钮上的模式对话框的情况下更改内容，则需要将内容静态地存储在您的文件中。
我提出以下解决方案：
var eleToDisplay = ["next1", "next2"];
var indexOfEles = 0;
$('#btn').click(function () {
$("#dialog").dialog({
title: "Change text on Next without closing ",
resize: "auto",
modal: true,
buttons: {
"Next": function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
},
Close: function() {
$(this).dialog( "close" );
}
},
open: function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
$(this).parent().find('.ui-button:last').focus();
}
});
});body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Skeleton of default dialog -->
<div id="dialog" title="Basic dialog">
<p></p>
</div>
<!-- The first dialog content -->
<div id="next1" style="display:none">
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<!-- The second dialog content -->
<div id="next2" style="display:none">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<button id='btn'>Click me</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34211240
复制相关文章
相似问题