Question

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

$.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。部分） *的数量，否则如果数量（2.部分）？

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

只要对象的属性与id标记的p属性匹配，您就可以使用属性名称作为选择器迭代对象。此外，由于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 3

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

但你不应该。

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。

缩短Javascript / Jquery中的功能

6 个答案: