Сократить функцию в Javascript / Jquery

0

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. часть)?

  • 0
    Один из способов «укоротить» это не вернуть json с сервера, а весь <form> , а просто заменить его.
  • 0
    Начните с исправления разметки (вы используете одни и те же идентификаторы дважды).
Показать ещё 1 комментарий
Теги:

6 ответов

1
Лучший ответ
["address", "telephone", "mobile", "fax", "email", "webpage"].map(
    function(key) { 
        if (data.hasOwnProperty(key) && !!data[key]) { 
            $('p#' + key).show(); 
        } else { 
            $('p#' + key).hide();
        } 
    });

Но вы не должны.

  • 0
    Но почему нет? Это работает!
  • 0
    Потому что «сократить код» не то, чего вы должны стремиться достичь. Вы должны рассчитывать на то, что код будет легко читать и понимать, поддерживая обобщенную обработку данных, сопоставление, проверку и т. Д. Почему бы вам не взглянуть на шаблоны js?
Показать ещё 1 комментарий
3

Предполагая, что имена объектов объекта точно совпадают с написанием идентификаторов элементов, вы можете сделать это:

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

... потому что .toggle() принимает логическое значение, чтобы сказать, показывать или скрывать. Любые свойства, которые не имеют идентификатора совпадающего элемента, не будут иметь никакого эффекта.

Примечание. Ваш html недействителен, если у вас есть несколько элементов с одинаковыми идентификаторами, но он все равно будет работать, потому что ваши селекторы указывают тег и идентификатор. Тем не менее, может быть более аккуратно просто удалить идентификаторы из элементов var:

<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/

  • 0
    Отличное решение, но когда я получаю новые данные из ajax, старые переменные не меняются, если старые данные установлены ..
  • 0
    Когда я вызываю сообщение ajax, старые данные: <p id = "address"> Адрес: <var> Test Street 999 2324233 </ var> </ p>. Если в массиве данных поле адреса пустое, старый html не скрывает ..
Показать ещё 2 комментария
1

Пока свойства объекта совпадают с атрибутами 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 Fiddle: http://jsfiddle.net/3uhx6/

  • 0
    «Кроме того, поскольку атрибуты id уникальны» - они должны быть уникальными, но их нет в разметке ОП. Обратите внимание, что тест if(element.length==1) не требуется, вы можете просто сказать $("#"+x).text(data[x]) (jQuery не возражает, если не найдено ни одного элемента).
0

Спасибо за 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.

0

Это то, для чего создаются системы шаблонов. Если вы настаиваете на использовании jQuery, есть плагин jQuery: https://github.com/codepb/jquery-template

Подробнее: Какие Javascript шаблоны двигателей вы рекомендуете?

0

Я бы использовал 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);
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню