Javascript Jquery无法找到元素
我正在尝试获取Javascript Jquery无法找到元素,javascript,jquery,Javascript,Jquery,我正在尝试获取flip类中的imgsrc。下面是我正在使用的HTML。我基本上想要得到src img，并在点击样例选项时对其进行更改 <li class="item product product-item"> <div class="product-item-info" data-container="product-grid"> <a href="http://127.0.0.1/magento2252/stellar-solar-jacket
flip样例选项时对其进行更改
<li class="item product product-item">
<div class="product-item-info" data-container="product-grid">
<a href="http://127.0.0.1/magento2252/stellar-solar-jacket.html" class="product photo product-item-photo" tabindex="-1">
<span class="product-image-container" style="width:240px;">
<span class="product-image-wrapper" style="padding-bottom: 125%;">
<img class="product-image-photo" src="http://127.0.0.1/magento2252/pub/media/catalog/product\cache\c687aa7517cf01e65c009f6943c2b1e9\/w/j/wj01-blue_main.jpg" width="240" height="300" alt="Stellar Solar Jacket" style="display: block;">
<img class="flip" src="http://127.0.0.1/magento2252/pub/media/catalog/product//w/j/wj01-red_back.jpg" width="240" height="300" alt="Stellar Solar Jacket" style="display: none;">
</span>
</span>
</a>
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="http://127.0.0.1/magento2252/stellar-solar-jacket.html">
Stellar Solar Jacket </a>
</strong>
<div class="product-reviews-summary short">
<div class="rating-summary">
<span class="label"><span>Rating:</span></span>
<div class="rating-result" title="67%">
<span style="width:67%"><span>67%</span></span>
</div>
</div>
<div class="reviews-actions">
<a class="action view" href="http://127.0.0.1/magento2252/stellar-solar-jacket.html#reviews">3 <span>Reviews</span></a>
</div>
</div>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="1225" data-price-box="product-id-1225">
<span class="normal-price">
<span class="price-container price-final_price tax weee">
<span class="price-label" style="display: inline;">As low as</span>
<span id="product-price-1225" data-price-amount="75" data-price-type="finalPrice" class="price-wrapper "><span class="price">$75.00</span></span>
</span>
</span>
</div>
<div class="swatch-opt-1225" data-role="swatch-option-1225">
<div class="swatch-attribute size" attribute-code="size" attribute-id="141">
<div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">
<div class="swatch-option text" id="option-label-size-141-item-168" aria-checked="false" aria-describedby="option-label-size-141" tabindex="0" option-type="0" option-id="168" option-label="S" aria-label="S" option-tooltip-thumb="" option-tooltip-value="S" rel="1218" role="option">S</div>
<div class="swatch-option text" id="option-label-size-141-item-169" aria-checked="false" aria-describedby="option-label-size-141" tabindex="0" option-type="0" option-id="169" option-label="M" aria-label="M" option-tooltip-thumb="" option-tooltip-value="M" rel="1221" role="option">M</div>
<div class="swatch-option text" id="option-label-size-141-item-170" aria-checked="false" aria-describedby="option-label-size-141" tabindex="0" option-type="0" option-id="170" option-label="L" aria-label="L" option-tooltip-thumb="" option-tooltip-value="L" rel="1224" role="option">L</div>
</div>
</div>
<div class="swatch-attribute color" attribute-code="color" attribute-id="93" option-selected="50">
<div aria-activedescendant="option-label-color-93-item-50" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">
<div class="swatch-option color selected" id="option-label-color-93-item-50" aria-checked="false" aria-describedby="option-label-color-93" tabindex="0" option-type="1" option-id="50" option-label="Blue" aria-label="Blue" option-tooltip-thumb="" option-tooltip-value="#1857f7" rel="1222" role="option" style="background: #1857f7 no-repeat center; background-size: initial;"></div>
<div class="swatch-option color" id="option-label-color-93-item-58" aria-checked="false" aria-describedby="option-label-color-93" tabindex="0" option-type="1" option-id="58" option-label="Red" aria-label="Red" option-tooltip-thumb="" option-tooltip-value="#ff0000" rel="1223" role="option" style="background: #ff0000 no-repeat center; background-size: initial;"></div>
<div class="swatch-option color" id="option-label-color-93-item-60" aria-checked="false" aria-describedby="option-label-color-93" tabindex="0" option-type="1" option-id="60" option-label="Yellow" aria-label="Yellow" option-tooltip-thumb="" option-tooltip-value="#ffd500" rel="1224" role="option" style="background: #ffd500 no-repeat center; background-size: initial;"></div>
</div>
</div>
</div>
<div class="product-item-inner">
<div class="product actions product-item-actions">
<div class="actions-primary">
<form data-role="tocart-form" data-product-sku="WJ01" action="http://127.0.0.1/magento2252/checkout/cart/add/uenc/aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi93b21lbi90b3BzLXdvbWVuL2phY2tldHMtd29tZW4uaHRtbA%2C%2C/product/1225/" method="post">
<input type="hidden" name="product" value="1225">
<input type="hidden" name="uenc" value="aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi9jaGVja291dC9jYXJ0L2FkZC91ZW5jL2FIUjBjRG92THpFeU55NHdMakF1TVM5dFlXZGxiblJ2TWpJMU1pOTNiMjFsYmk5MGIzQnpMWGR2YldWdUwycGhZMnRsZEhNdGQyOXRaVzR1YUhSdGJBJTJDJTJDL3Byb2R1Y3QvMTIyNS8,">
<input name="form_key" type="hidden" value="OIKwIjHelyF4WqGg"> <button type="submit" title="Add to Cart" class="action tocart primary">
<span>Add to Cart</span>
</button>
<input class="swatch-input super-attribute-select" name="super_attribute[141]" type="text" value="" data-selector="super_attribute[141]" data-validate="{required: true}" aria-required="true" aria-invalid="false"><input class="swatch-input super-attribute-select" name="super_attribute[93]" type="text" value="" data-selector="super_attribute[93]" data-validate="{required: true}" aria-required="true" aria-invalid="false" data-attr-name="color">
</form>
</div>
<div data-role="add-to-links" class="actions-secondary">
<a href="#" class="action towishlist" title="Add to Wish List" aria-label="Add to Wish List" data-post="{"action":"http:\/\/127.0.0.1\/magento2252\/wishlist\/index\/add\/","data":{"product":"1225","uenc":"aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi93b21lbi90b3BzLXdvbWVuL2phY2tldHMtd29tZW4uaHRtbA,,"}}" data-action="add-to-wishlist" role="button">
<span>Add to Wish List</span>
</a>
<a href="#" class="action tocompare" title="Add to Compare" aria-label="Add to Compare" data-post="{"action":"http:\/\/127.0.0.1\/magento2252\/catalog\/product_compare\/add\/","data":{"product":"1225","uenc":"aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi93b21lbi90b3BzLXdvbWVuL2phY2tldHMtd29tZW4uaHRtbA,,"}}" role="button">
<span>Add to Compare</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
输出为未定义的
在成功回调中，此
已停止引用第2行的相同上下文。因此，将预期结果存储在局部变量中，例如
$widget.element.on('click', '.' + options.optionClass, function () {
var prodId = $(this).attr('rel');
var _this = this;
$.ajax({
url: urlBuilder.build('swatch/index/product'),
data: {productId:prodId},
type: 'post',
success: function(result) {
var flipsrc = result.flipsrc;
if(result.success != ''){
var urlsrc = $(_this).closest('div.product-item-info').find('img.flip').attr('src');
console.log(urlsrc);
}
}
});
return $widget._OnClick($(this), $widget);
});
您能否完成此示例，以便我们可以运行该示例？是因为你的javascript部分不完整，我们只能猜测它是如何实现的。“这”是什么？这是一个样例选项，如果我用它来获取这个元素的rel，它会给我正确的结果，如果你想让我共享js的功能，我可以共享，但是它不会有太大帮助。我已经更新了我的答案并添加了js函数。@PeterB我得到了正确的响应，我只想在我的ajax响应中得到src。代码运行正常，我有多个li，所以这段代码不会中断。我说得对吗？不，这不应该归功于按顺序使用了.closest
和find
，这使得搜索保持在每个div.product-item-info
的DOM子树中。谢谢。因此，我的问题不是上述问题的重复，或者是？另外，我的代码中出现错误的只是变量中的赋值。如果我在以上几点上错了，请纠正我。@Tester从根本上说，如果没有问题附带的HTML块，它将被认为是类似的。另外，是的，在您的案例中，没有分配这个变量就是破坏代码的原因。我必须指出的是，这个解决方案只是解决您的问题的方法之一。是的，我就是这么认为的。
$widget.element.on('click', '.' + options.optionClass, function () {
var prodId = $(this).attr('rel');
var _this = this;
$.ajax({
url: urlBuilder.build('swatch/index/product'),
data: {productId:prodId},
type: 'post',
success: function(result) {
var flipsrc = result.flipsrc;
if(result.success != ''){
var urlsrc = $(_this).closest('div.product-item-info').find('img.flip').attr('src');
console.log(urlsrc);
}
}
});
return $widget._OnClick($(this), $widget);
});