2015-10-08 123 views
1

我之前问过这个问题,但是;我现在可以将名称或ID分配给标签单选按钮。我之前无法做到这一点,并且造成了一团糟。各种各样的人试图帮助,但我做了一个完整的东西(对不起)。使用jQuery显示/隐藏基于单选按钮选择的DIV

WHMCS的问题在于编辑内容时非常有限,当你在盒子外面思考时。在这里所描述

单选按钮/标签:

<label id="{$options.nameonly}" name="{$options.nameonly}" > 
    <input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if} /> 
    {if $options.name} 
    {$options.name} 
    {else} 
    {$LANG.enable} 
    {/if} 
</label> 

忽略,我使用相同的ID和姓名两次的事实。这只是为了表明我可以将它们命名为两者(事实并非如此)。我将删除其中的一个,这取决于这种情况最适合使用哪种方式。

这个名为{$ options.nameonly}的变量可以是我通过WHMCS添加的各种东西。

比方说,{$ options.nameonly}包括了3点可能的选择(单选按钮):

  1. 没有备份用在专业备份所有
  2. 每周备份
  3. 与专业的备份
  4. 每月备份

在这种情况下,标签ID /名称显然是上述之一。

现在我想基于任何3个以上的选择显示一个DIV:

- <div id="weeklymsg">Weekly backup information</div> 
- <div id="monthlymsg">Monthly backup information</div> 
- And don't show a DIV when 'No backups at all' option is selected 

我试过几件事情要得到这个工作,但是我能做到是使一个DIV最好的出现,但不消失了。

我想用类似这个东西给我的情况:

$("label[name='Weekly backups with professional backup']").click(function(){ 
    $('input[type=radio]').parent().next('div').hide(); 
    if ($(this).is(':checked')) 
    { 
     var value = $(this).val(); 
     $('#'+value).fadeIn(); 
    } 
    else 
    { 
     var value = $(this).val(); 
     $('#'+value).fadeOut(); 
    } 
}); 

如果你知道一个更好的解决方案或有更好的主意请做好份额

我也不知道什么是更好的一般;定位标签ID还是标签名称?或者这不重要?

如果您需要更多信息或详细信息,请让我知道。我已经很欣赏这样一个事实,即你仍在阅读。 :)

旁注;如果你还没有注意到它,ID /名称之间会有空格,例如:“每周备份与专业备份”

更新:添加了一个简单的JSFiddle here

--------------------------------------------- ------------ UPDATE ------------------------------------- ----------------------

好的,据我所知,问题是由“iradio_square-blue”造成的。无论出于何种原因,这使DIV在选择选项时不显示。

我使用textcrawler搜索了所有文件,发现它也位于.js文件中(两次)。

首先occassion是在这里:

jQuery('input').iCheck({ 
    inheritID: true, 
    checkboxClass: 'icheckbox_square-blue', 
    radioClass: 'iradio_square-blue', 
    increaseArea: '20%' 
}); 

二occassion是在这里:

jQuery.post("cart.php", 'a=cyclechange&ajax=1&i='+i+'&billingcycle='+billingCycle, 
    function(data) { 
     jQuery("#productConfigurableOptions").html(jQuery(data).find('#productConfigurableOptions').html()); 
     jQuery('input').iCheck({ 
      inheritID: true, 
      checkboxClass: 'icheckbox_square-blue', 
      radioClass: 'iradio_square-blue', 
      increaseArea: '20%' 
     }); 
    } 
); 

也有在为 “iradio_square蓝色的”,但是我不相关的.css文件一些点击不要以为这些都是问题所在。但我确实认为.js中的上述2个条目导致DIV的问题?

补充说明:我现在很确定,这2件在base.js是造成问题,因为当我删除它们(测试),它的工作原理100%。它显示并隐藏DIV的。所以任何人都知道这个......的解决方法?

+2

是不是p可以创建小提琴以获得更清晰的画面。 –

+0

添加了一个简单的JSFiddle。希望这个对你有帮助?并感谢您的采访。 :) – Joanne

+1

http://jsfiddle.net/kishoresahas/r0xpwg1h/2/这是你所期望的吗? –

回答

1

我希望这能解决你的问题..

$("#weeklymsg").hide(); 
 
$("#monthlymsg").hide(); 
 
$(".form-group input[type='radio']").on("change", function (e) { 
 
    if($(e.target).closest("label")[0].id == "Monthly backups with professional backup"){ 
 
    $("#weeklymsg").hide(); 
 
      $("#monthlymsg").show(); 
 
    }else if($(e.target).closest("label")[0].id == "Weekly backups with professional backup"){ 
 
    $("#weeklymsg").show(); 
 
      $("#monthlymsg").hide(); 
 
    }else{ 
 
      $("#weeklymsg").hide(); 
 
      $("#monthlymsg").hide(); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="col-sm-12"> 
 
     <div class="form-group"> 
 
      <label for="inputConfigOption14"></label> 
 

 
      <div> 
 
       <label for="inputConfigOption14">What kind of backups</label> 
 
      </div><label class="" id="No backups at all"></label> 
 

 
      <div class="iradio_square-blue" style=" position: relative;"> 
 
       <label class="" id="No backups at all"><input name= 
 
       "configoption[14]" type="radio" value="43"></label>No backups 
 
       at all 
 
      </div><label id="Weekly backups with professional backup"></label> 
 

 
      <div class="iradio_square-blue" style="position: relative;"> 
 
       <label id= 
 
       "Weekly backups with professional backup"><input name="configoption[14]" 
 
       type="radio" value="43 "></label>Weekly backups with 
 
       professional backup 
 
      </div><label class="" id= 
 
      "Monthly backups with professional backup"></label> 
 

 
      <div class="iradio_square-blue" style="style="> 
 
       <label class="" id= 
 
       "Monthly backups with professional backup"><input name= 
 
       "configoption[14]" type="radio" value="43 "></label>Monthly 
 
       backups with professional backup 
 
      </div> 
 
     </div> 
 
    </div><br> 
 
    <br> 
 

 
    <div id="weeklymsg"> 
 
     Weekly backup information 
 
    </div> 
 

 
    <div id="monthlymsg"> 
 
     Monthly backup information 
 
    </div>

+1

谢谢。尽管它在JSFiddle中有效,但由于某种原因,我的网站(基于WHMCS)不起作用。它似乎是一个JS/jQuery冲突的地方。但我知道你不可能用上面的例子来解决这个问题。无论如何,我很欣赏你所做的和答案的工作(至少对于JSFiddle)。现在必须弄清楚它在WHMCS中的工作。 :S – Joanne

+1

请参阅我发布的答案,它是用纯javascript完成的! –

1

纯JavaScript,我希望这解决了与WHMCS和jQuery您的问题..

document.getElementById("weeklymsg").style.display = "none"; 
 
document.getElementById("monthlymsg").style.display = "none"; 
 

 
var p = document.querySelectorAll(".form-group input[type='radio']"); 
 
for (var i = 0; i < p.length; i++) { 
 
    p[i].onclick = function (e) { 
 
     var closestStr = closest(e.target, "label").id; 
 
     if (closestStr == "Monthly backups with professional backup") { 
 
      document.getElementById("weeklymsg").style.display = "none"; 
 
      document.getElementById("monthlymsg").style.display = "block"; 
 
     } else if (closestStr == "Weekly backups with professional backup") { 
 
      document.getElementById("weeklymsg").style.display = "block"; 
 
      document.getElementById("monthlymsg").style.display = "none"; 
 

 
     } else { 
 
      document.getElementById("weeklymsg").style.display = "none"; 
 
      document.getElementById("monthlymsg").style.display = "none"; 
 
     } 
 
    } 
 
} 
 

 
function closest(el, selector) { 
 
    var matchesFn; 
 
    // find vendor prefix 
 
    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function (fn) { 
 
     if (typeof document.body[fn] == 'function') { 
 
      matchesFn = fn; 
 
      return true; 
 
     } 
 
     return false; 
 
    }); 
 

 
    // traverse parents 
 
    while (el !== null) { 
 
     parent = el.parentElement; 
 
     if (parent !== null && parent[matchesFn](selector)) { 
 
      return parent; 
 
     } 
 
     el = parent; 
 
    } 
 

 
    return null; 
 
}
<div class="col-sm-12"> 
 
     <div class="form-group"> 
 
      <label for="inputConfigOption14"></label> 
 

 
      <div> 
 
       <label for="inputConfigOption14">What kind of backups</label> 
 
      </div><label class="" id="No backups at all"></label> 
 

 
      <div class="iradio_square-blue" style=" position: relative;"> 
 
       <label class="" id="No backups at all"><input name= 
 
       "configoption[14]" type="radio" value="43"></label>No backups 
 
       at all 
 
      </div><label id="Weekly backups with professional backup"></label> 
 

 
      <div class="iradio_square-blue" style="position: relative;"> 
 
       <label id= 
 
       "Weekly backups with professional backup"><input name="configoption[14]" 
 
       type="radio" value="43 "></label>Weekly backups with 
 
       professional backup 
 
      </div><label class="" id= 
 
      "Monthly backups with professional backup"></label> 
 

 
      <div class="iradio_square-blue" style="style="> 
 
       <label class="" id= 
 
       "Monthly backups with professional backup"><input name= 
 
       "configoption[14]" type="radio" value="43 "></label>Monthly 
 
       backups with professional backup 
 
      </div> 
 
     </div> 
 
    </div><br> 
 
    <br> 
 

 
    <div id="weeklymsg"> 
 
     Weekly backup information 
 
    </div> 
 

 
    <div id="monthlymsg"> 
 
     Monthly backup information 
 
    </div>

+0

我明白,真的,非常感谢你所做的工作,但再次,这不希望与WHMCS合作。真的很蹩脚。唯一发生的事情是,DIV的开始隐藏,因为代码的顶部提到了,但是单击任何选项都不会导致相应的DIV出现。我认为它被阻止或不正确地读取它。同时我也会尝试其他一些事情以及您提供的代码。我很抱歉,你没有做这些工作。我真的不明白为什么这不起作用...:/ – Joanne

+0

我想我可能已经发现了这个问题!问题在于“iradio_square-blue”类,当我在Firefox中删除“live”时,它起作用。奇怪...我必须检查出来。我会添加相关的JavaScript的东西。也许你明白什么是错的或造成这种情况? – Joanne

+0

嗯,它确实是base.js文件中的两段编码(我已在原始文章中发布)。有没有解决方法?那么DIV甚至可以使用这些代码? TY – Joanne

相关问题