嘗試使用jQuery將占位符屬性添加到Wordpress中插件的搜索字段

Question

我正在嘗試建立一個擁有Equity商店的網站，而我只希望Equid搜索小部件具有“ Search”作為占位符。 我對wordpress並不陌生，我已經將我的custom.js正確地放入了子主題的function.php中，而我的其他腳本也可以正常工作了。

感覺這應該很簡單。 。 。 這是我要影響的html：

<input type="search" class="ecwid-SearchPanel-field" maxlength="100" kl_vkbd_parsed="true">

我使用的jQuery是標准的：

$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');

但這還沒有結束。 我注意到的一件事是，Chrome的檢查器像常規html一樣顯示此輸入，但實際的頁面源卻顯示了腳本。 。 。

我有一個custom2.js，這是我從ecwid論壇上獲得的代碼，它可以運行。 。 。 排序。 。 。 它來自2010年，是純JavaScript。 現在，我已將其完全注釋掉，以避免與我在jQuery中嘗試做的事情發生沖突

該網站為http://katherinesheetz.com/。Ecwid搜索小部件位於自定義菜單下的側欄中。

任何幫助，將不勝感激。 提前致謝！

編輯添加詳細信息：

我之所以這樣分享是因為custom2.js實際上會影響輸入元素，即使它與使用jQuery的custom.js同時加載也由於某種原因什么也不做。 。 。

custom2.js：

function inputPlaceholder (input, placeholder, color) {
  if (!input) return null;
  var placeholder_color = color || '#AAA';
  var default_color = input.style.color;
  if (input.value === '' || input.value == placeholder) {
    input.value = placeholder;
    input.style.color = placeholder_color;
  }
  var add_event = /*@cc_on'attachEvent'||@*/ 'addEventListener';
  input[add_event](/*@cc_on'on'+@*/'focus', function(){
    input.style.color = default_color;
    if (input.value == placeholder) {
      input.value = '';
    }
  }, false);
  input[add_event](/*@cc_on'on'+@*/'blur', function(){
    if (input.value === '') {
      input.value = placeholder;
      input.style.color = placeholder_color;
    } else {
      input.style.color = default_color;
    }
  }, false);
  input.form && input.form[add_event](/*@cc_on'on'+@*/'submit', function(){
    if (input.value == placeholder) {
      input.value = '';
    }
  }, false);

  return input;
}
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
function ecwid_set_placeholder() {
    var search_box = getElementsByClassName('ecwid-SearchPanel-field')[0];
    if (search_box) {
        inputPlaceholder(search_box,'Search');      
        clearInterval(ecwid_set_placeholder_interval);
    }
}
var ecwid_set_placeholder_interval;
ecwid_set_placeholder_interval = setInterval('ecwid_set_placeholder();',100);

custom.js基本上就是這樣：

(function($){
     $(document).ready(function() {
          //some other scripts for adding style to sidebar and then the relevant part. . .
          $$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');
     });
})( jQuery );

Answer 1

好的，看來這畢竟是（種類）裝貨單問題。 我在子主題themes.php中切換了入隊順序，然后將純正的javascript放在首位，然后將jQuery放在第二位，如下所示：

<?php
function straight_scripts_enqueue_here() {
    wp_enqueue_script( 'custom2', get_stylesheet_directory_uri() . '/js/custom2.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'straight_scripts_enqueue_here' );

function jQuery_enqueue_here() {
    wp_enqueue_script(
        'custom',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'jQuery_enqueue_here' );

我希望這對使用ecwid插件構建wordpress網站並嘗試修復搜索小部件的用戶有所幫助。 。 。

這仍然是在重新設計輪子，因為它仍然沒有使用占位符屬性。 但是至少custom2.js的默認值解決方案現在可以正常運行。 我仍然不確定為什么.attr（'placeholder'，'Search'）無法正常工作，但是從用戶體驗的角度來看，該網站可以正常運行，所以我想我會放這張幻燈片，希望能更好地理解它。在當地大學學習了一個學期的JavaScript之后。 。 。

Answer 2

Ecwid是AJAX應用程序，在網站的“主機”頁面加載后加載。 因此，在您的自定義腳本執行之時，搜索欄或任何其他窗口小部件可能就不存在了。 為了抓住合適的時機，您需要使用Ecwid Javascript API-它允許您處理商店頁面加載事件並在合適的時機運行自定義腳本。

特別是，我建議在腳本中使用“ Ecwid.OnPageLoaded”事件處理程序。 更多詳細信息： http : //help.ecwid.com/customer/portal/articles/1169548#Ecwid.OnPageLoad

示例代碼：

Ecwid.OnPageLoaded.add(function (page) {
    jQuery('.ecwid-SearchPanel-field').attr('placeholder', 'Search products');
});

實際操作中查看： http ： //jsfiddle.net/makfruit/xuv2x15k/

Answer 3

由於它是一個小部件，因此該搜索輸入會動態加載。 我猜這是一個加載順序問題，您正在嘗試在加載之前選擇輸入，因此，可以嘗試使用選擇搜索輸入：

$(document).ready(function(){
    $(document).find('.ecwid-SearchPanel-field').attr('placeholder', 'Search');
});

否則，您將需要在完成小部件腳本后以某種方式調用custom.js 。 我不確定是否可以通過修改functions.php來做到這一點，每個小部件都有自己的技巧。

我嘗試直接從控制台添加該屬性，並且該屬性有效，因此必須在調用函數時確定該時間。