Shopify- 获取属性形式 <select>

Posted 2023-05-09

【中文标题】Shopify- 获取属性形式 <select>

【英文标题】：Shopify- getting attribute form <select>

【发布时间】：2021-10-05 22:28:33

【问题描述】：

所以我有一个问题。我正在 Sopify 中开发一家商店，并且我有一个自定义部分，其中我有用于选择变体的选择器，并且旁边还显示了一个变体图像。我想要做的是，当我选择一个变体时，特色图像也会更改为所选变体的特色图像，但我不知道我应该如何获得它的属性。 这是我的代码：

  $('.upsell-variants__selector').click(function()
    var main_img = $(this).attr('data-variant');
    $('.product__upsell-image img').attr('src', main_img);
  );
    

              <div class="product__upsell-image">
                  <img src=" all_products[product_one].variants[0].featured_image.src | img_url: 'master' " data-src="" >
              </div>
              <div class="product__upsell-form">
                    
                
                  <form class="upsell__form" id="product-upsell" method="post" action="/cart/add" id="form-- upsell_prod1.id ">
                    <!-- Variant selector -->
                    <select  calss="upsell-variants" name="id">
                      % for variant in upsell_prod1.variants %
                      <option class="upsell-variants__selector" data-src="variant.featured_image.src | img_url: 'master'" data-variant=" variant.id " value=" variant.id "
                              % if variant == current_variant %selected="selected"% endif %
                              >
                         variant.title %comment% -  variant.price | money  %endcomment%% if variant.inventory_quantity <= 0 %- Sold Out%endif%
                      </option>
                      % endfor %
                    </select>
                    <div class="product__upsell-price"> all_products[product_one].variants[1].price | money </div>
                    <button type="submit" class="btn upsell-atc single-ajax-cart-btn-upsell" id="add-to-cart-button">Quick Add</button>
                  </form>

编辑： 找到了解决方案，这里是它的链接：https://jsfiddle.net/4a9uxwbL/24/

【问题讨论】：

试试var main_img = this.dataset.src;（一般是$(this).attr('data-src')，我猜图片的网址就是这个）

不幸的是它不起作用。我认为由于某种原因我什至无法选择选项？我不知道...

对我来说很好：jsfiddle.net/wcxLkonb/2 只需做一些基本的调试：console.log(this) 是一个开始

嗯，对我不起作用。我做错了什么？ i.imgur.com/hXadWko.png

什么，你的意思是我的小提琴不适合你？您检查浏览器控制台是否有错误？

【参考方案1】：

如果你想处理选择元素值的变化，你可能想在这里使用$.change() 函数。它会将“更改”事件处理程序附加到您的 select 元素 - 这样您就可以将 URL 放在 value 属性中。

// JS
$( ".upsell-variants" )
  .change(function () 
    var str = "";
    $( "select option:selected" ).each(function() 
      console.log("Variant selected!:", this.value);
      $('.product__upsell-image img').attr('src', this.attr('data-variant');
    )
  )

// html
// I fixed the spelling in "class" here
<select class="upsell-variants" name="id">
  % for variant in upsell_prod1.variants %
  <option class="upsell-variants__selector" data-src="variant.featured_image.src | img_url: 'master'" value="variant.id">
   variant.title %comment% -  variant.price | money  %endcomment%. 
  % if variant.inventory_quantity <= 0 %- Sold Out%endif%
  </option>
% endfor %
</select>

【讨论】：

处理选择更改比处理选项单击要好得多，但是这个问题主要是关于从 获取图像网址，而您的答案并没有这样做。它正在获取变体 ID。

@Chris G 正是这样做的。如果您查看更新后的 HTML，我将 option 元素的值更改为图像 URL。 OP 也可以继续使用 data-* 属性，并保持原来的 value 属性。

是的，我没有看到，但这是一个 shopify 模板，它将依赖于 id 的值，而不是一些图像 url。同样，这特别是关于获取data-src 属性的值；我的示例代码对我来说很好用，但由于某种原因甚至不适用于 OP。更改源 HTML 在这里会 100% 适得其反。

"我想做的是，当我选择一个变体时，特色图像也会更改为所选变体的特色图像，但我不知道我应该如何获取它的属性。" OP 知道如何获取属性，他在原始代码中使用 $().attr() 。 OP 想要一个绑定到 select 元素的事件处理程序，而不是读取状态的按钮上的单击处理程序。我想同意不同意！

同样，处理 select onchange 非常好，并且比每个选项的单击处理程序更可取。那不是我的意思。我的观点是 OP 正在读取错误的属性，而不是修复他们的 jQuery 代码，而是更改了他们的 HTML。这是没有意义的，并且可能会引入其他问题。部分答案是 OP 只是将 var main_img = $(this).attr('data-variant'); 更改为 var main_img = $(this).attr('data-src'); （他们代码中的 only 问题），但考虑到他们的 cmets，由于某些未知原因，这仍然对他们不起作用。

【参考方案2】：

这个解决方案对我有用：

  $('.upsell-variants').on('change', function() 
    var optionSelected = $("option:selected", this);
    var main_img = $(optionSelected).data("src");
    $('.product__upsell-image img').attr('src', main_img);
  );