Блог

ПРИВЕТ, у меня небольшая проблема, у меня есть скрипт списка желаний, который добавляет предметы из магазина в сеанс и сохраняет их, но когда я нажимаю на список, он добавляет только первый элемент, как сделать его динамичным, чтобы каждый щелчок по списку желаний был для отдельного элемента в магазине

моя структура статьи, onclick wlbutton1 или wlbutton2 он должен добавить статью с id1 или 2 в список пожеланий:

     echo '<div class="span3 filter--'.$obj->product_prop1.'" data-price="'.substr($obj->price, 0, -3) . '" data-popularity="3" data-size="s|m|xl" data-color="pink|orange" data-brand="'.$obj->product_brand.'">'; 
        echo '<div class="product">'; 
        echo '<div class="product-img featured">'; 
        echo '<form method="post" action="../cart_update.php">';
        echo '<div class="picture"><img src="images/'.$obj->product_img_name.'">';
        echo '<div class="img-overlay"><button class="add_to_cart btn more btn-primary">Kaufen</button><a href="#" class="btn buy btn-danger" id="producturl'.$obj->id.'">...mehr</a></div>';
        echo '</div>';
        echo '</div>';
        echo '<div id="result"></div>';
        echo '<div class="main-titles"><h4 class="title">'.$currency.$obj->price.'</h4>';
        echo '<h5 class="no-margin isotope--title" id="product'.$obj->id.'">'.$obj->product_name.'</h5>';
        echo '<p class="no-margin pacifico" style="position: absolute;right: 10px;top: 5px; text-transform: capitalize;">'.$obj->product_brand.'</p>';
        echo '<p class="no-margin" style="position: absolute;right: 10px;top: 25px;"><a class="wl-button'.$obj->id.'"><i class="icon-gift"></i></a></p>';
        echo '</div>';
        echo '<p class="desc">'.substr($obj->product_desc, 0, 160) . '...</p>';
        echo '<input type="hidden" name="product_qty" value="1" />';
        echo '<input type="hidden" name="product_code" value="'.$obj->product_code.'" />';
        echo '<input type="hidden" name="type" value="add" />';
        echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
        echo '</form>';
        echo '</div>';
        echo '</div>';
  

Мой код Jquery как сделать его динамичным и индивидуальным для каждого элемента?:

 $(".wl-button").click(function() {
    var wlproduct = $('#product').text();
    var wlproducturl = $('#producturl').attr('href');
    $.ajax({
        type : "POST",
        url : "../assets/wlscript.php",
        data : { wlproduct : wlproduct, wlproducturl : wlproducturl },
        success : function(data) { 
        $('div#result').text('You added ' wlproducturl ' ' wlproduct ''s to your wishlist.');
        }
    }); 
}); 
  

Вот пример того, как вы можете найти данные, необходимые для добавления вашей статьи. Сначала пример HTML :

 <div class="products">
    <form>
        <p>
            <!-- Fist article -->
            <span>Article 1</span>
            <!-- A name construct so that I can easilly find in which iteration of the loop I am -->
            <input type="hidden" name="article[0].id" value="1" />
            <input type="hidden" name="article[0].name" value="article1" />
            <button class="addButton">Add article</button>
        </p>
        <p>
            <!-- Second article -->
            <span>Article 2</span>
            <input type="hidden" name="article[1].id" value="2" />
            <input type="hidden" name="article[1].name" value="article2" />
            <button class="addButton">Add article</button>
        </p>
        <!-- … others articles -->
    </form>
</div>
  

И часть Javascript :

 $(document).ready(function(){
    $(".addButton").on("click", function(event){
        event.preventDefault();
        var button = $(this);
        var parent = button.parent(); // We need to find the container in which to seach our fields.
        var idArticle = parent.find("input[name$='.id']").val(); // Find the ID
        var nameArticle = parent.find("input[name$='.name']").val(); // Find ather data
        alert("Add article with id = "   idArticle   " and name = "   nameArticle);
        // Next step is the ajax method to call the server with the correct data. 
    });
});
  

Работая таким образом, вы можете отправить на свой сервер данные, необходимые для добавления статьи в свой список пожеланий.

Вот ссылка на пример скрипки JS.

В этом примере вы можете увидеть, как обойти содержимое HTML с помощью кнопки, чтобы найти входные данные.

Вы можете найти больше о «обходе дерева» с помощью jQuery API.