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. часть)?
["address", "telephone", "mobile", "fax", "email", "webpage"].map(
function(key) {
if (data.hasOwnProperty(key) && !!data[key]) {
$('p#' + key).show();
} else {
$('p#' + key).hide();
}
});
Но вы не должны.
Предполагая, что имена объектов объекта точно совпадают с написанием идентификаторов элементов, вы можете сделать это:
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]);
}
}
});
Пока свойства объекта совпадают с атрибутами 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/
if(element.length==1)
не требуется, вы можете просто сказать $("#"+x).text(data[x])
(jQuery не возражает, если не найдено ни одного элемента).
Спасибо за 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.
Это то, для чего создаются системы шаблонов. Если вы настаиваете на использовании jQuery, есть плагин jQuery: https://github.com/codepb/jquery-template
Подробнее: Какие Javascript шаблоны двигателей вы рекомендуете?
Я бы использовал 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);
}
<form>
, а просто заменить его.