Javascript / Jquery中的缩短功能

Question

缩短我的 js/jquery 函数的 LF 方法：

$.ajax({ // Start ajax post
..........
success:    function (data) { // on Success statment start
..........
//1. Part
$('var#address').text(data.address);            
$('var#telephone').text(data.telephone);            
$('var#mobile').text(data.mobile);          
$('var#fax').text(data.fax);            
$('var#email').text(data.email);            
$('var#webpage').text(data.webpage);        

//2. Part
if (!data.address){ $('p#address').hide(); } else {  $('p#address').show(); }; 
if (!data.telephone){ $('p#telephone').hide(); } else {  $('p#telephone').show(); }; 
if (!data.mobile){ $('p#mobile').hide(); } else {  $('p#mobile').show(); }; 
if (!data.fax){ $('p#fax').hide(); } else {  $('p#fax').show(); }; 
if (!data.email){ $('p#email').hide(); } else {  $('p#email').show(); }; 
if (!data.webpage){ $('p#webpage').hide(); } else {  $('p#webpage').show(); }; 

}, End Ajax post success statement 

这是我的 html：

<p id="address">Address:<var id="address">Test Street 999 2324233</var></p>
<p id="telephone">Telephone:<var id="telephone">+1 0000009</var></p>
<p id="mobile">Mobile:<var id="mobile">+1 0000009</var></p>
<p id="email">E-mail:<var id="email">info@example</var></p>
<p id="webpage">Web Page:<var id="webpage">www.example.com</var>/p>

我们如何减少选择器*(1.part)* 的数量以及如果数量(2.part)？

Answer 1

假设您的对象的属性名称与元素 ID 的拼写完全匹配，您可以这样做：

for (var k in data) {
    $('var#' + k).text(data[k]);
    $('p#' + k).toggle(!!data[k]);
}

...因为.toggle() 接受一个布尔值来表示是显示还是隐藏。任何没有匹配元素 id 的属性都将无效。

注意：如果您有多个具有相同 id 的元素，则您的 html 无效，但它仍然可以工作，因为您的选择器指定了标签和 id。不过，从 var 元素中删除 id 可能会更整洁：

<p id="address">Address:<var>Test Street 999 2324233</var></p>
<!-- etc. -->

有了这个 JS：

$('#' + k).toggle(!!data[k]).find('var').text(data[k]);

然后添加一些代码来隐藏任何不在返回的data 对象中的元素：

$('var').parent('p').hide();

...把它们放在一起：

$.ajax({
    // other ajax params here
    success : function(data) {
        $('var').parent('p').hide();
        for (var k in data) {
            $('#' + k).toggle(!!data[k]).find('var').text(data[k]);
        }
    }
});

演示：http://jsfiddle.net/z98cw/1/

Answer 2

["address", "telephone", "mobile", "fax", "email", "webpage"].map(
    function(key) { 
        if (data.hasOwnProperty(key) && !!data[key]) { 
            $('p#' + key).show(); 
        } else { 
            $('p#' + key).hide();
        } 
    });

但你不应该。

Answer 3

只要对象的属性与p 标记的id 属性匹配，您就可以使用属性名称作为选择器来遍历对象。此外，由于 id 属性是唯一的，因此请不要在选择器前加上 var 前缀，这是不必要的。

var data = {
    address: "address",
    telephone: "telephone",
    mobile: "mobile",
    fax: "fax",
    email: "email",
    webpage: "webpage"
};

for(x in data){
    var elem = $("#" + x);
    if(elem.length == 1){
        elem.text(data[x]);
    }
}

JS 小提琴： http://jsfiddle.net/3uhx6/

Answer 4

这就是创建模板系统的目的。 如果你坚持使用 jQuery，有一个 jQuery 插件：https://github.com/codepb/jquery-template

更多： What Javascript Template Engines you recommend?

Answer 5

我会为此使用 javascript 模板（我已将示例缩短了很多，但您应该明白要点）。

首先是模板，我喜欢 Underscore.js，所以我会继续使用它。

<% if data.address %>
  <p id="address">Address: {%= Test Street 999 2324233 %}</p>

在你的 success 函数中编译它

success: function(data) {
    //assuming data is a json that looks like this {'address':'my street'}
    var template = _.template(path_to_your_template, data);
    $('var#addresscontainer').html(template);
}

Answer 6

感谢birukaze和nnnnnn：

有了你的建议，功能就来了；）：

                        for (var key in data) {
                        if (data.hasOwnProperty(key) && !!data[key]) { 
                            $('p#' + key).show().find('var').text(data[key]); 
                        } else { 
                            $('p#' + key).hide();
                        } 
                    };

现在我可以避免使用 var 选择器了。