WooCommerce - jQuery的 - Muliple的顯示標題選擇的色板

我需要使用jQuery獲得幾個選定對象的值，並顯示每個對象的標題，分別...WooCommerce - jQuery的 - Muliple的顯示標題選擇的色板

我使用WooCommerce與變異色板和照片插件。選擇色板時，我想在屬性標題旁邊顯示色板名稱。我發現部分solution，但我需要函數來循環每個類，因爲我有多個色板選項。

從變化色板插件的代碼是

jQuery的在上述解決方案提供的是：

(function($){ 
"use strict"; 
$('body').on('change', 'div.select', function(event){ 
var colorname = ""; 
var colorname = $(".selected a.swatch-anchor").attr('title'); 
if(colorname){ 
    $(".variations-table label").html('Color: ">'+colorname); 
}else{ 
    $(".variations-table label").html("Please select a color"); 
} 
}); 
})(jQuery);

該腳本作品，如果你只有一個樣本面板，但我一定要有幾個色板選項。所以我會選擇顏色，大小和方向作爲色板。

我知道我需要在每個類上運行一個函數，但是我的嘗試一直不成功。這是我想出了：

$(function() { 
function changeName) { 
    $("td.attributes_border").each(function(){ 

     var swatchname = "", 
      swatchname = $(".selected a.swatch-anchor").attr('title'); 
     if(swatchname){ 
      $(".attribute_title_label label").html(+swatchname); 
     }else{ 
      $(".attribute_title_label label").html("Please select an option"); 
     } 
     }); 
$("div.select").on("change", changeName); 
changeName(); 
});

我相信這是很簡單的，但我的JavaScript和jQuery的知識是非常有限的。

感謝

來源

2015-09-11 rockeypjb

多小時的反覆試驗後，我已經找到了解決我的問題。

首先，我改變了我的表。我刪除了包含標題的表格行，並將其更改爲一個表格單元格（我只將其設置爲一行以將其放在單獨的行上 - 我使用CSS進行了修復）。這讓我有每個循環只包含一個表格行，我分配了一個類「swatchcontainer」。其次，我添加了「swatchname」類的跨度。這給了我一個返回值的佔位符。允許我使用默認屬性標題。這是PHP：

<table class="variations-table" cellspacing="0"> 
     <tbody> 
      <?php 
      $loop = 0; 
      foreach ($this->attributes as $name => $options) : $loop++; 
       ?> 
       <tr class="swatchcontainer"> 
        <td class="attribute_title_label"><label for="<?php echo sanitize_title($name); ?>"> <?php echo wc_attribute_label($name); ?> : <span class="swatchname"> </span></label> 
        </td> 
        <td class="attributes_border"> 
         <?php 
         if (isset($this->swatch_type_options[sanitize_title($name)])) { 
          $picker_type = $this->swatch_type_options[sanitize_title($name)]['type']; 
          if ($picker_type == 'default') { 
           $this->render_default(sanitize_title($name), $options); 
          } else { 
           $this->render_picker(sanitize_title($name), $options); 
          } 
         } else { 
          $this->render_default(sanitize_title($name), $options); 
         } 
         ?> 
        </td> 
       </tr> 
      <?php endforeach; ?> 
     </tbody> 
    </table>

接下來，令人沮喪的，就是寫這符合我的要求的腳本。我知道這個問題是找到選定的值並將其應用到同一行中的單元格。我想出了：

jQuery('table').change(function(){ 
    $('.swatchcontainer').each(function() { 
    var swatchname = $(this).find("div.selected a.swatch-anchor").attr('title'); 
    if(swatchname){ 
     $(this).find("span.swatchname").html(swatchname); 
    }else{ 
     $(this).find("span.swatchname").html("Please select an option"); 
    } 
}); 
});

我的邏輯是，每當有一個變化表（無論是頁面加載或一個樣本用戶點擊，函數運行
然後我用。每對於我的tr類，所以它會通過每個tr.swatchcontainer循環。
swatchname變量位於使用.find查找函數當前正在運行的tr中（$（this））
一個簡單如果else語句被使用，如果有一個值。使用相同的$（this）.find賦值確定它應用於當前tr中的元素。

希望這是正確的或至少可以接受的，但它確實有效。

來源

2015-09-13 01:55:40 rockeypjb

WooCommerce - jQuery的 - Muliple的顯示標題選擇的色板

回答

相關問題