Question

我正在尝试使用equid商店构建一个网站，我只想让等距搜索小部件进行搜索＆＃34;搜索＆＃34;作为占位符。我不是wordpress的新手，我的custom.js正确排入我的孩子主题的function.php和我的其他脚本n snips正常工作。

感觉这应该非常简单。。。这是我想要影响的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论坛获得的代码，它是KINDA的作品。。。八九不离十。。。它来自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

好吧，毕竟看起来是（KIND OF）装货订单问题。我在我的子主题functions.php中切换了enqueue顺序，并将直接的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（＆＃39;占位符＆＃39;，＆＃39;搜索＆＃39;）无法正常工作，但从用户体验的角度来看网站运行正常，所以我想我会让这个幻灯片，并希望在当地学院的一学期JavaScript后更好地理解它。。

Answer 2

Ecwid是一个AJAX应用程序，它是在网站＆＃34;主机＆＃34;之后加载的。页面加载。因此，自定义脚本执行时，搜索栏或任何其他窗口小部件可能根本不存在。要抓住合适的时机，您需要使用Ecwid Javascript API - 它将允许您处理商店页面加载事件并在适当的时刻运行自定义脚本。

特别是，我建议使用＆＃34; Ecwid.OnPageLoaded＆＃34;脚本中的事件处理程序。更多详情：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来做到这一点，每个小部件都有自己的技巧。

我尝试直接从控制台添加该属性并且它可以正常工作，因此它必须是您调用函数的时间。

尝试使用jQuery在wordpress中为插件的搜索字段添加占位符属性

3 个答案: