Как добавить разные классы CSS в разные теги ответа ajax

Клиент делает вызов ajax через jquery. После извлечения данных из БД я возвращаю ответ. В этом ответе я применяю много классов и стилей для разных тегов html. Это делает код выглядящим уродливым.Как добавить разные классы CSS в разные теги ответа ajax

while (my @data = $statement->fetchrow_array()) 
{ 
print " <li class='productWrap $data[7]' style='height:200px; width:150px;'> 
      <center> 
       <div class=\"productImageWrap\" id=\"productImageWrapID_$data[0]\"> 
       <img src=$data[5] width='75' height='75'' /> 
       </div> 
       <div> 
        <div style='font-size: 11px; font-family: \"Verdana\"; '> $data[6] $data[1] $data[2] </div> 
        <b>        
         <span> <strike> $data[3] </strike> $data[4] </span> 
         <a href='#' id=\"featuredProduct_$data[0]\" onclick=\" adjust_menu(this.id); simpleCart.add('name=$data[6] $data[1] $data[2]', 'price=$data[4]','image=$data[5]');   return false;\"> 
          <img src='images/add-to-basket2.gif' alt='Add To Basket' width='111' height='32' id='featuredProduct+$data[0]' /> 
         </a> 
        </b> 

       </div> 
      </center> 
     </li>"; 
}

Есть ли способ, чтобы я мог избежать этого. и применять классы и стили на стороне клиента после получения ответа?

источник

2013-11-13 Devesh Agrawal

вы думали использования шаблона, который может быть заполнен JSON? –

Возможно, лучше использовать JSON в качестве выходного формата и полностью стилизовать стиль в интерфейсе. При этом вы можете влиять на всю клиентскую сторону разметки и использовать коды состояния в своих вызовах ajax, чтобы лучше понять, какие результаты даны (например, ни один найден, ни один найден, для многих результатов aso.). – Chrisissorry

Хорошим решением является кодирование данных в строке JSON, передача их клиенту и возможность визуализации результатов.

Есть несколько двигателей шаблонов jquery. Интересный подход заключается в следующем:

<script type="text/template" id="itemTemplate"> 
    <ul> 
     <li class='productWrap' style='height:200px; width:150px;'> 
      ... 
     </li> 
    </ul> 
</script>

Поскольку это не JavaScript, браузер не выполнит его. Он также не будет пытаться это сделать. Но вы можете использовать jQuery $('#itemTemplate ul li'), чтобы получить элемент списка. Теперь вы можете использовать всю магию JQuery, чтобы вставить данные в шаблон и добавить стили CSS, и т.д.:

var item = $('#itemTemplate ul li'); 
item.addClass(data[7]);

Связанный:

источник

2013-11-13 13:11:32

Как добавить разные классы CSS в разные теги ответа ajax

ответ

Смежные вопросы