使用父 class 并获取子 class 的中间部分

Question

我正在使用 Joomla 的新子表单代码。这允许用户复制一组输入并重新使用它们。基本上是一种可重复的形式。此表单创建以下结构。

<div class="subform-repeatable-group">
    <div class="control-group jform_params__content__content0__dc_subheader-cg"></div>
    <div class="control-group jform_params__content__content0__dc_typeofcontent-cg"></div>
    <div class="control-group jform_params__content__content0__dc_toc_image-cg"></div>
</div>

问题是子表单加载到父表单中，但 Joomla 将其视为独立表单。因此，正常的 Show/Hide 功能不再有效。所以我必须创建自己的。

我得到了什么，什么不好

这是生成的Select:

<select id="jform_params_theme_selection" name="jform[params][theme_selection]" class="chzn-done">
  <option value="3dperspective" selected="selected">3D Perspective</option>
  <option value="default">Default</option>
  <option value="notheme">Select a theme!</option>
</select>

我已经得到了一段代码，可以检查父表单上的 select 值是否为 selected。

$('#jform_params_theme_selection').bind('change', function (e) {
  if( $('#jform_params_theme_selection').val() == 'notheme') {
  } else if( $('#jform_params_theme_selection').val() == 'default') {
  } else if( $('#jform_params_theme_selection').val() == '3dperspective') {
  }
}).trigger('change');

现在我可以像这样手动添加每个元素：

$('[class$="__dc_typeofcontent-cg"]').hide();

但一定有更好的方法。

我想要什么。

我想对在其 class __dc_ 中具有以下 letters/symbols 且具有 .parents(.subform-repeatable-group)[= 的每个项目使用 .hide() 函数48=]

一些额外的信息

还有一个主题没有 __dc_ 但叫做 __threed_ 所以我必须能够定义 letters/symbols.
我已经检查过我是否可以使用前面有 X 个位置或后面有 X 个位置的东西，但这是不断变化的。

感谢大家的帮助。

像往常一样，每当我得到更多结果时，我都会继续搜索和更新此 post。

Answer 1

可以使用 filter() 类似的东西：

  var cGroups = $('.subform-repeatable-group .control-group');

  var hideTheme = '_dc';
  var showTheme = '_threed';

  cGroups.filter(function(){
     return this.className.indexOf(hideTheme )>-1
  }).hide()



  cGroups.filter(function(){
     return this.className.indexOf(showTheme )>-1
  }).show()

DEMO

Answer 2

你的问题有点绕，所以我把重点放在了你想要的部分。

假设您对 Joomla 抛出的 classes 没有太多控制权，无论您需要什么来构建一种方法来捕获父 class 和您要查找的子字符串。但假设你同时拥有这两个，你可以让节目隐藏起来有点通用。您总是可以告诉 jQ 在父项中查找带有子字符串的子项。

$("[class*='"+searchclass+"']",parent)

一个fiddle给你：https://jsfiddle.net/dvdxt58f/1/

Answer 3

最有效的方法是charlietfl建议的方法，但还有另一种方法可以解决。

(function ($) {
  $(document).ready(function() {

        $('#jform_params_theme_selection').bind('change', function (e) {
      if( $('#jform_params_theme_selection').val() == 'notheme') {
      } else if( $('#jform_params_theme_selection').val() == 'default') {

        $( ".subform-repeatable-group div[class*='__threed_']" ).hide();
        $( ".subform-repeatable-group div[class*='__dc_']" ).show();        

      } else if( $('#jform_params_theme_selection').val() == '3dperspective') {

        $( ".subform-repeatable-group div[class*='__threed_']" ).show();
        $( ".subform-repeatable-group div[class*='__dc_']" ).hide();        

      }
    }).trigger('change');

  });
})(jQuery);

基本上您使用 * 选择器并创建：

$( ".subform-repeatable-group div[class*='__threed_']" ).hide();

我添加了这个，因为它在某些情况下可能会有用，即使我选择了 charlietfl 的回答。

演示：https://jsfiddle.net/tdo9go2q/11/

使用父 class 并获取子 class 的中间部分

Use parent class and get middle part of child class

javascript

jquery

joomla

subform

我得到了什么，什么不好

我想要什么。

一些额外的信息

感谢大家的帮助。