javascript - 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.部分)*的数量，否则数量(2.部分)？

Answer 1

假设对象的属性名称与元素 ID 的拼写完全匹配，您可以执行以下操作:

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

...因为 .toggle()接受一个 bool 值来表示是否显示或隐藏。任何没有匹配元素 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/