Question

我的网站上有一个自定义框，供客户在Shopify平台上输入产品定制。主框（name =＆＃34; properties [Engrave]＆＃34;）基于条件参数集出现，没有问题。本周，我尝试根据类似的参数添加第二个框（名称=＆＃34;属性[Engrave2]＆＃34;），但它似乎无法正常运行。文本限制不适用于框（名称=＆＃34;属性[Engrave2]＆＃34;），它只会隐藏在＆＃34; No Engravings＆＃34;选项已被选中。在快速总结中，我试图让以下3个过程起作用。我已尝试对代码进行多次编辑，但收效甚微，并感谢任何帮助！

用户选择无雕刻：出现0个文本框
用户选择3个字符雕刻：出现1个文本框（名称=＆＃34;属性[Engrave]＆＃34;），具有3个字符限制
用户选择12个字符雕刻：出现2个文本框（名称=＆＃34;属性[雕刻]＆＃34;，名称=＆＃34;属性[Engrave2]＆＃34;）与第一个（名称= ＆＃34;属性[Engrave]＆＃34;）具有3个字符限制，第二个（名称=＆＃34;属性[Engrave2]＆＃34;）具有12个字符限制

HTML

<p><label for="engrave"><b>Please Engrave:</b></label></p>
<p><input type="text" id="engrave" name="properties[Engrave]" placeholder="Your monogram - 3 character limit..."/></p>
<p><input type="text" id="engrave" name="properties[Engrave2]" placeholder="Your banner message - 12 character limit..." /></p>

对应的Java

var chk = $("[name='properties[Engrave]']", "[name='properties[Engrave2]']").attr('id');
if(variant.option1 == "No Engravings" || variant.option2 == "No Engravings" || variant.option3 == "No Engravings"){
  $("[name='properties[Engrave]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
  $("[name='properties[Engrave2]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
}

else if(variant.option1 == "3 Characters or Less" || variant.option2 == "3 Characters or Less" || variant.option3 == "3 Characters or Less"){
  $("[name='properties[Engrave]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",3);
    $("#" + chk).parent().siblings("p").show();
  });
  $("[name='properties[Engrave2]']").hide();
    $("#" + chk).val("");  
    $("#" + chk).removeAttr("maxlength");      
    $("#" + chk).parent().siblings("p").hide();
}

else if(variant.option1 == "12 Characters or Less" || variant.option2 == "12 Characters or Less" || variant.option3 == "12 Characters or Less"){ 
  $("[name='properties[Engrave]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",3);
    $("#" + chk).parent().siblings("p").show();
   });  
  $("[name='properties[Engrave2]']").show(function(){
    $("#" + chk).val("");
    $("#" + chk).attr("maxlength",12);
    $("#" + chk).parent().siblings("p").show();
   });            
}

非常感谢，如果需要澄清，请告诉我。

Answer 1

我已经测试了您的代码，您可以访问：http://jsfiddle.net/mig1098/nfrcw03n/

尝试更改：

var variant = {
    option1:'12 Characters or Less',
    option2:'12 Characters or Less',
    option3:'12 Characters or Less',
}

无法使用Shopify代码操作自定义文本框

1 个答案: