缩短Javascript / Jquery中的功能

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. 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，因此html仍然有效。 不过，仅从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

只要对象的属性与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 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

更多： 您推荐什么Javascript模板引擎？

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选择器。