Question

我有这个javascript函数，应该将我重定向到

http://localhost:8888/undefined/add-to-cart".

但我得到了这个：

$('.add-to-cart').on('click', function () { var productId = $(this).find('.indexImg').attr('id'); $.ajax(productId+"/add-to-cart", { }); });

<img class="indexImg" src="{{$product->image}}" id="{{$product->id}}">

@foreach($products as $product) <div class="col-md-3"> <div class="box-product"> <div class="img-wrapper item"> <a href="/product/{{$product->id}}/{{$product->slug}}"> <a class="thumbnail" href="/product/{{$product->id}}/{{$product->slug}}" style="margin-bottom: 0px; border: none;"> <img class="indexImg" src="{{$product->image}}" id="{{$product->id}}"> </a> </a> <div class="tags"> @if($product->discount > 0) <span class="label-tags"><span class="label label-danger">Išpardavimas</span></span> @endif <span class="label-tags"><span class="label label-info">Nauja</span></span> </div> <div class="option"> <i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i> </div> </div>

有人可以帮助我获取产品的ID吗？

HTML：

var casper = require('casper').create();
var url = 'http://cnt.rm.ingv.it/';
var length;

casper.start(url);

casper.then(function() {
    this.waitForSelector('table#dataTablesEvents');
});

function getCellContent(row, cell) {
    cellText = casper.evaluate(function(row, cell) {
        return document.querySelectorAll('table tbody tr')[row].childNodes[cell].innerText.trim();
    }, row, cell);
    return cellText;
}

casper.then(function() {
    var rows = casper.evaluate(function() {
        return document.querySelectorAll('table tbody tr');
    });
    length = rows.length;
    this.echo("table length: " + length);
});

// This part can be done nicer, but it's the way it should work ...
casper.then(function() {
    for (var i = 0; i < length; i++) {
        this.echo("Data: " + getCellContent(i, 1));
        this.echo("Magnitudo: " + getCellContent(i, 3));
        this.echo("Zona: " + getCellContent(i, 5));
        this.echo("Profondità: " + getCellContent(i, 7));
        this.echo("Latitudine: " + getCellContent(i, 9));
        this.echo("Longitudine: " + getCellContent(i, 11));
    }
});

casper.run();

Answer 1

做一件事变化

<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i>

使用

<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white" id="{{$product->id}}"></i>

并通过

获取

$(this).attr('id');

所以代码将是

$('.add-to-cart').on('click', function () {
        var productId =  $(this).attr('id');

        $.ajax(productId+"/add-to-cart",
        {

        });
    });

Answer 2

$('.add-to-cart').on('click', function (event) {
        var productId = event.target.id;

        $.ajax(productId+"/add-to-cart",
        {

        });
    });

Answer 3

.find试图找到内部当前元素你需要上去然后找到indexImg

    $('.add-to-cart').on('click', function () {
       var productId = $(this).parents('.box-product').find('.indexImg').attr('id');

       $.ajax(productId+"/add-to-cart",
       {

       });
    });

Answer 4

您尝试基于DOM获取产品ID的方式不正确。 jQuery .find（）方法在元素中查找指定的元素，即它的后代。如果您查看HTML，您会发现包含div按钮的add-to-cart元素和您尝试获取其id属性的图像位于同一级别。

因此，您必须更改遍历id标记的<img>属性的方式。

var productId = $(this).closest('.box-product').find('.indexImg').attr('id');

服务器响应状态为500 AJAX Post

4 个答案: