jquery - 显示具有不同标题的同一 div 的多个实例

coder 2023-08-07 原文

我想根据上一步中选中的复选框数量多次显示特定的 div。类似于 this form 中的步骤 3.2 .这样做的最佳方法是什么？

我希望根据选中的复选框数多次显示的 Div，其中 h3 (#tile_name) 是复选框的值:

<div class="plan_select" id="border">
  <h3 id="tile_name">Tiles - Selected</h3>
  <div class='styled-select'>
    <select name='bankskivans'>
      <option value='Halvrund'>Halvrund</option>
      <option value='Helrund'>Helrund</option>
      <option value='Karnis helrund'>Karnis helrund</option>
      <option value='Nosformad'>Nosformad</option>
      <option value='Rak fasad'>Rak fasad</option>
      <option value='Rak rundad'>Rak rundad</option>
      <option value='Vattenfall'>Vattenfall</option>
    </select>
  </div>
</div>

JS fiddle https://jsfiddle.net/L7swuv8g/

JQuery 代码:

$(document).ready(function() {
  var $measures = $('input.checkbox_plan');
  var $showmeasures = $('input[name="measures_show"]');
  var $border = $('div#border');

  $measures.hide();
  $border.hide();
  $showmeasures.on('click', function() {
    if ($(this).is(':checked')) {
      $measures.show();
      $border.show();
    } else {
      $measures.hide();
      $border.hide();
    }
  });
});

最佳答案

不确定您到底想要什么，但也许这对您有用？

我做到了，所以它会为每个选中的复选框创建模板内容的实例。 (或者没有，如果没有被选择的话。)

https://jsfiddle.net/d6k40wd0/2/

HTML:

<div id='template' style='display:none'>
  <div class='plan_select' id='border'>
    <h3 id='tile_name'>#title#</h3>
    <div class='styled-select'>
      <select name='bankskivans'>
        <option value='Halvrund'>Halvrund</option>
        <option value='Helrund'>Helrund</option>
        <option value='Karnis helrund'>Karnis helrund</option>
        <option value='Nosformad'>Nosformad</option>
        <option value='Rak fasad'>Rak fasad</option>
        <option value='Rak rundad'>Rak rundad</option>
        <option value='Vattenfall'>Vattenfall</option>
      </select>
    </div>
  </div>
</div>

<label for="a"><input type="checkbox" id="a" value="alpha" class="templateChoice" />Choose a.</label>
<label for="b"><input type="checkbox" id="b" value="bravo" class="templateChoice" />Choose b.</label>
<label for="c"><input type="checkbox" id="c" value="charlie" class="templateChoice" />Choose c.</label>
<label for="d"><input type="checkbox" id="d" value="delta" class="templateChoice" />Choose d.</label>
<br />
<button type="button" onclick="showResult();">Show result</button>
<hr />
<div id="result"></div>

JavaScript:

function showResult() {
  var template = $("#template").html();
  $("#result").html("");
  $.each($(".templateChoice"), function(index, checkbox) {
    if (checkbox.checked) {
        var templateCopy = template.replace("#title#", "You selected " + checkbox.value);
        $("#result").html($("#result").html() + templateCopy);
    }
  });
}

关于jquery - 显示具有不同标题的同一 div 的多个实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34877614/

有关jquery - 显示具有不同标题的同一 div 的多个实例的更多相关文章

ruby-on-rails - Rails 3 中的多个路由文件 - 2
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？最佳答案在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby - Highline 询问方法不会使用同一行 - 2
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？最佳答案
ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？最佳答案我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
ruby 正则表达式 - 如何替换字符串中匹配项的第 n 个实例 - 2
在我的应用程序中，我需要能够找到所有数字子字符串，然后扫描每个子字符串，找到第一个匹配范围(例如5到15之间)的子字符串，并将该实例替换为另一个字符串“X”。我的测试字符串s="1foo100bar10gee1"我的初始模式是1个或多个数字的任何字符串，例如，re=Regexp.new(/\d+/)matches=s.scan(re)给出["1","100","10","1"]如果我想用“X”替换第N个匹配项，并且只替换第N个匹配项，我该怎么做？例如，如果我想替换第三个匹配项“10”(匹配项[2])，我不能只说s[matches[2]]="X"因为它做了两次替换“1fooX0barXg
ruby - 多个属性的 update_column 方法 - 2
我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案您可以使用update_columns(attr1:val1,attr2:val2

jquery - 显示具有不同标题的同一 div 的多个实例

有关jquery - 显示具有不同标题的同一 div 的多个实例的更多相关文章

随机推荐