Question

这里的div用于显示2个弹出窗口，具体取决于下面提到的ajax方法响应，

 <a href="#flash" data-rel="popup" data-position-to="window" class="auto-pop" data-transition="none"></a>
 <div data-role="popup" id="flash" data-overlay-theme="a" data-theme="c" data-dismissible="false" class="ui-content" class="dc">
 <center><img src="images/spin.gif" width="250" height="268" /></center>
 <p class="dc"><strong>Congratulations you have achieved <span class="percentage_value"> </span>% of the readings!</strong></p>
 </div>

 <a href="#achievflash" data-rel="popup" data-position-to="window" class="auto-pop1" data-transition="none"></a>
 <div data-role="popup" id="achievflash" data-overlay-theme="a" data-theme="c" class="ui-content" class="dc">
 <p class="dc"><strong>This is a free app.</p><p> Please<a href="https://www.google.com" target="_blank" data-role="button" data-inline="true" data-theme="b">DONATE</a> for us.
 </strong></p>



 if(achieve.flag == 1) {
    setTimeout(function(){
     $('.percentage_value').text(achieve_value); $('#flash').show();
     $('#flash-screen').show();
     $('a.auto-pop').trigger('click');
     $('#flash').delay(4000).fadeOut(1000);
     $('#flash-screen').delay(4000).fadeOut(1000);
    },100);
    }//flag if
if(donation.flag == 1) {
    setTimeout(function(){
     $('#achievflash').show();
     $('#achievflash-screen').show();
     $('a.auto-pop1').trigger('click');
    },6000);
}

我有大约100个不同的html文件，每个文件都包含相同的div。我想将div作为一个js并将其称为method.Please帮我解决如何实现这个

Answer 1

你可以通过JS直接append / prepend你的html：

var html;
html += '<a href="#flash" data-rel="popup" data-position-to="window" class="auto-pop" data-transition="none"></a>';
html += '<div data-role="popup" id="flash" data-overlay-theme="a" data-theme="c" data-dismissible="false" class="ui-content" class="dc">';
html += '  <center><img src="images/spin.gif" width="250" height="268" /></center>';
html += '  <p class="dc"><strong>Congratulations you have achieved <span class="percentage_value"> </span>% of the readings!</strong></p>';
html += '</div>';

然后：

$("body").prepend(html);

或您最好将内容放在一个标记中，首先将该标记附加到该标记之后。你可以通过处理属性填充get指针。例如：

var pointer = $('<span></span>');
$(pointer).append(html);
$("body").prepend(pointer);

现在你可以通过pointer控制你的html。 E.g：

 $(pointer).fadeIn();

Answer 2

你可以这样做：

在每个页面中删除你的div。仅使用您的逻辑添加脚本引用。

<script src="//code.jquery.com/your-script.js"></script>
在您的服务器上创建两个文件“your-script.js”（显示弹出逻辑）和“your-content.html”（仅包含div的内容）。
修改“your-script.js”，以便能够从“your-content.html”文件加载远程html内容，并将原始HTML数据插入任何页面上的所需位置：

$("#body").load("/path/to/your-content.html");

Answer 3

不太确定你指的是哪个div，但是，出现某个div的最佳方法是将div存储为JS变量并使用jQuery .append()或.prepend()方法将其添加到页面。

只要每个页面都包含JS文件，您就可以轻松附加div。

示例HTML：

<div id="myDiv">This is the existing division</div>

示例JavaScript / jQuery：

var newDiv = "<div id='newDiv'>This is your new div</div>"
var differentDiv = "<div id='differentDiv'>This is a different new div</div>"

if (/*response 1*/) {
    $("#myDiv").append(newDiv); //Could also append to $("body")
} else if (/*response 2*/) {
    $("#myDiv").append(differentDiv); //Could also append to $("body")
}

Answer 4

有多种方法可以做到这一点。

你可以在JS中将该代码变成一个变量并以这种方式拉出来。

var code = '<a href="#flash" data-rel="popup" data-position-to="window" class="auto-pop"     data-transition="none"></a>     <div data-role="popup" id="flash" data-overlay-theme="a" data-theme="c" data-    dismissible="false" class="ui-content" class="dc">     <center><img src="images/spin.gif" width="250" height="268" /></center>     <p class="dc"><strong>Congratulations you have achieved <span class="percentage_value">     </span>% of the readings!</strong></p>     </div>     <a href="#achievflash" data-rel="popup" data-position-to="window" class="auto-pop1" data-transition="none"></a>     <div data-role="popup" id="achievflash" data-overlay-theme="a" data-theme="c" class="ui-content" class="dc">     <p class="dc"><strong>This is a free app.</p><p> Please<a href="https://afes.org.au/events/donate-to-stand-firm" target="_blank" data-role="button" data-inline="true" data-theme="b">DONATE</a> for us.     </strong></p>'

$('html').append(code);

OR

$('div').after(code);

在特定选择器后插入。

你也可以把它放在一个自己的文件中，并用HTML或PHP包含它。

HTML INCLUDE：

<!--#include virtual="filepath" -->

PHP包含：

<?php include("filepath"); ?>

其中＆＃34; filepath＆＃34;是包含代码的文件的路径。

使用JS嵌入DIV

4 个答案: