javascript - jQuery 函数内部的复杂代码

Question

在 jQuery 中，我想在 .html() 函数中编写更多代码。我想使用php代码。而且这种风格的写作非常复杂。很难被阅读。

我可以在外部加载 php/html 脚本吗？

function() {
         $(this).children('.product_hover').show()
         .html('<div class="product_hover_buttons">'+
         '<button class="btn btn-success btn-large"><i class="icon-shopping-cart icon-white"></i> '+
         '<strong>Add to Cart</strong></button><br/><br/>'+
         '<button class="btn btn-primary btn-large"><i class="icon-search icon-white"></i> '+
         '<strong>View</strong></button>'+'</div>');
    }

Answer 1

是的，保留这样的template.php文件：

#template.php
<div class="product_hover_buttons">
<button class="btn btn-success btn-large"><i class="icon-shopping-cart icon-white"></i>
<strong>Add to Cart</strong></button><br/><br/>
<button class="btn btn-primary btn-large"><i class="icon-search icon-white"></i>
<strong>View</strong></button>
</div>

然后您可以使用 AJAX 像这样加载模板：

$('#result').load('ajax/template.php');

在你的情况下：

function() {
  $(this).children('.product_hover').show().load('ajax/template.php');
}

Answer 2

您可以使用Jquery.load()通过另一个页面加载内容并从那里获取呈现的 html。

但它将与当前场景不同，因为它将涉及一个 ajax 调用来加载您在内部加载的 html 内容。

Answer 3

您可以使用jQuery.get().

$.get('path/to/html.html', function(data) {
    DOMjQueryElement.html(data); //whatever element you want
});

这是API。