Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.12.2015, 13:06
Интересующийся
Отправить личное сообщение для melst Посмотреть профиль Найти все сообщения от melst
 
Регистрация: 26.11.2015
Сообщений: 28

Применение одного скрипта к разным строкам <table>
Здравствуйте.
В силу знаний не могу пока решить следующую задачу.
Есть обычная таблица, которая заполняется значениями из БД. Каждая строка - товар. В последней ячейке строк есть кнопка "в корзину". При нажатии на странице без перезагрузки должны появляться позиции (по подобию строки из таблицы). Я как новичок присваивал каждой ячейке индивидуальный #id через цикл и тогда я мог брать значения ячеек через $('#id').val() или .text() , но мне пришлось на каждую кнопку вешать отдельный скрипт.
Вопрос. Можно ли использовать один скрипт так, чтобы он брал данные только из той строки в какой нажата кнопка? Присматриваюсь к .closest()
Уважаемые, наведите на нужный путь.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 28.12.2015, 13:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от melst
Каждая строка - товар.
Вот каждая строка и должна иметь ID уникальный, но взятый не итерацией из цикла, а равным ID товара, а не ячейки содержать ID. Насчет одним скриптом - можно, и лучше делегировать обработку родителю. А вообще надо код показывать, чтобы была возможность ответить адекватно.
Ответить с цитированием
  #3 (permalink)  
Старый 28.12.2015, 13:53
Интересующийся
Отправить личное сообщение для melst Посмотреть профиль Найти все сообщения от melst
 
Регистрация: 26.11.2015
Сообщений: 28

<table>
    <tr id="id1">
        <td>Товар 1</td>
        <td>диаметр</td>
             <td>
            <select id='sel'>
                 <option selected disabled value="0">выберите размер</option>
                <option value=0.7>350x2000</option>
                <option value=0.76>380x2000</option>
            </select>
        </td>
        <td>60</td>
        <td><button id='but1'>Кнопка</button></td>
    </tr>
<tr id="id2">
        <td>Товар 2</td>
        <td>диаметр</td>
             <td>
            <select id='sel'>
                 <option selected disabled value="0">выберите размер</option>
                <option value=0.7>350x2000</option>
                <option value=0.76>380x2000</option>
            </select>
        </td>
        <td>60</td>
        <td><button id='but2'>Кнопка</button></td>
    </tr>
</table>


$('#but').click(function (){
           if($('#sel').val()>0){   // если выбран элемент SELECT
                var res=$("#id1").html();  // присваиваем переменной содержимое строки <TR>
                $("#div").html(res);  // выводим содержимое sel в какой-то <div>
           }
           else {
                $("#sel").css('background-color','#FF0D0D');  // подсветка красным <select> если элемент не выбран
          
           }
           $("#sel").change();    
    });


Полностью код не стал уж выкладывать)) Не показывать же грязное белье всем) Это общая суть того как я копирую содержимое первой строки в какой-то заданный <div>
Можно как-то отвязаться от конкретных #id ? Что-то мелькало на просторах интернета с применением $(this) и .closest(). Суть вроде бы такая, что где произошло событие click скрипт работает в пределах этого элемента, например <tr> т.е. одной строки.
Просто не знаю куда поиск направить.
Ответить с цитированием
  #4 (permalink)  
Старый 28.12.2015, 14:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

tr id="id1" - это что такие идентификаторы и имеют товары?

Сообщение от melst
Можно как-то отвязаться от конкретных #id ?
Зачем, если стоит задача работать с товарами и добавлять их в корзину? Вы сам механизм корзина представляете себе и что вообще в нее добавлять выгодно?
Ответить с цитированием
  #5 (permalink)  
Старый 28.12.2015, 14:20
Интересующийся
Отправить личное сообщение для melst Посмотреть профиль Найти все сообщения от melst
 
Регистрация: 26.11.2015
Сообщений: 28

Идентификаторы я тут привел для примера просто, а так там 1, 2, 3 в БД id автоматом присваивается.
У меня задумка с корзиной такая:
без перезагрузки страницы я вывожу выбранные позиции где-то на странице, id в сессию, а основную корзину я сделаю уже на PHP отдельной страницей с выборкой из БД.
Я вот не пойму как один скрипт привязать к конкретной кнопке и строке с этой кнопкой.
Ответить с цитированием
  #6 (permalink)  
Старый 28.12.2015, 15:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Корзина по сути и есть либо сессия, либо в базе, и управлять этим будет в лбом случае серверный язык, РНР так РНР. Может быть и на куках. А идентификаторы товаров в этой корзине будут ключами массива, под которыми помещают другие важные характеристики товара, дабы не дергать базу постоянно, так как корзина обычно имеет еще и краткое представление отображаемое постоянно.

Если можно не только добавить товар в корзину, но и выбрать его количество, то ключевым элементом в этом случае будет не ячейка/строка таблицы, а поле формы, которое помимо ID товара может хранить и его цену и прочие параметры.

Если же нет и добавляется по одному, и не зависимо от того что щелкают в строке таблицы, то ID должен содержать TR, иначе ячейка. При этом не обязательно идентификатор держать в атрибуте id, есть и data-name.

$('селектор_таблицы').on('click', 'селектор_строк/ячеек', function() {
//отправляем id товара серверу
})

Хотя добавление в корзину, это обычно кнопка.

Последний раз редактировалось laimas, 28.12.2015 в 15:10.
Ответить с цитированием
  #7 (permalink)  
Старый 28.12.2015, 15:25
Интересующийся
Отправить личное сообщение для melst Посмотреть профиль Найти все сообщения от melst
 
Регистрация: 26.11.2015
Сообщений: 28

Немного говорим о разном. Если известны все селекторы, то это все просто. Если скрипт один, то в нем же не пропишешь все селекторы? Он как-то должен определять в какой строке нажата кнопка. Я вот еще порылся на просторах и примерно такой скрипт вырисовывается
function addtocart() {
		$('#addtocart').click(function(){  //addtocart - селектор всех кнопок
			var res = $(this).text(); // к примеру берем текст самой кнопки
			alert(res);
		});
	}
	addtocart();

Скрипт работает только для первой строки, а как бы сварганить так, чтобы для каждой строки?
Я хочу реальзовать как бы не по сути корзину таким способом, а просто внешний облик. При нажатии кнопки между, например, header и content появлялся див с позициями, которые выбрал пользователь. Когда нажимает оформить, то уже переходит на страницу корзины где властвует PHP)))
Параллельно с этим, кстати, можно ajax'ом отправить id

Последний раз редактировалось melst, 28.12.2015 в 15:28.
Ответить с цитированием
  #8 (permalink)  
Старый 28.12.2015, 15:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от melst
$('#addtocart').click(function(){ //addtocart - селектор всех кнопок
'#addtocart' - не может быть селектором всех кнопок, ибо id на странице должно быть уникальным, в противном случае скрипт найдет первый из них, а на остальные ему будет наплевать.

Сообщение от melst
Когда нажимает оформить, то уже переходит на страницу корзины где властвует PHP
РНР вообще не властен на странице - сервер выдал запрашиваемое, а дальше ему ровным счетом наплевать.

Я вам показал как описывается делегирование обработчика родителю. Кнопки ли это, ячейки ли таблицы, дело десятое, а в этом обработчике делайте что хотите.
Ответить с цитированием
  #9 (permalink)  
Старый 28.12.2015, 15:52
Интересующийся
Отправить личное сообщение для melst Посмотреть профиль Найти все сообщения от melst
 
Регистрация: 26.11.2015
Сообщений: 28

Может тогда поступить проще и при выводе таблицы присваивать кнопке селектор равный id товара?
Ответить с цитированием
  #10 (permalink)  
Старый 28.12.2015, 16:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Я не понимаю ваших терзаний. Не важно как как установить обработчики на источник этой операции, ведь в любом случае это была бы одна функция.

Конечно кнопке, и она вообще может иметь невалидный id, то есть id="3245", но лучше data-prop="здесь в формате lson поместить о товаре все что потребуется, а можно только идентификатор". Все, какие терзания, если только добавить в корзину. Или же за вопросом "одна функция", это добавление товара в корзину, еще что-то показать, еще чего либо... ?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
копирование скрипта с одного сайта на другой media-mobil jQuery 3 16.04.2015 20:39
Передать переменную из одного скрипта в другой igorecheg Общие вопросы Javascript 2 14.08.2013 09:17
POST запрос. Перенести переменную из одного скрипта php в другой. SergAG Общие вопросы Javascript 6 18.07.2013 21:39
Применение скрипта к движку DLE region029 jQuery 3 02.06.2012 00:00
как передать значение из одного скрипта во второй eidicon Общие вопросы Javascript 12 04.05.2012 20:34