Utilisation de la classe parent et obtention de la partie centrale de la classe enfant

Question

Je travaille avec le nouveau code SubForm de Joomla. Cela permet à l'utilisateur de dupliquer un ensemble d'entrées et de les réutiliser. Fondamentalement, une forme reproductible. Ce formulaire crée la structure suivante.

<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> 

Le problème est que le sous-formulaire est chargé dans le formulaire parent, mais Joomla le voit comme un formulaire indépendant. Par conséquent, les fonctions normales Afficher/Masquer ne fonctionnent plus. Donc je dois créer le mien.

Que dois-je suis et ce qui est pas bon

Ceci est généré Choisir:

<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> 

je l'ai déjà eu le morceau de code qui va vérifier si la valeur de sélection sur le formulaire parent est sélectionné .

$('#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'); 

Maintenant, je peux biensur pour chaque élément ajouter manuellement comme ceci:

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

Mais il doit y avoir une meilleure façon.

Qu'est-ce que je veux?

1. Je veux utiliser la fonction .hide() sur chaque élément qui a les lettres suivantes/symboles dans sa catégorie __dc_ et a comme .parents(.subform-repeatable-group)

Un peu des informations supplémentaires

1. Il y a un autre thème qui n'a pas __dc_ mais est appelé __threed_ donc je dois être en mesure de définir les lettres/symboles.
2. J'ai déjà vérifié si je pouvais utiliser quelque chose avec X quantité de positions de l'avant ou une quantité X de positions de l'arrière mais qui change constamment.

Merci à tous pour votre aide.

Comme d'habitude, je vais continuer à chercher et mettre à jour ce post chaque fois que j'obtiens plus de résultats.

Answer 1

pourrait utiliser filter() quelque chose comme:

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

Votre question est un peu alambiquée donc je me suis concentré sur la partie ce que vous voulez. En supposant que vous n'ayez pas beaucoup de contrôle sur les classes que Joomla y jette, peu importe ce dont vous aurez besoin pour créer un moyen de capturer la classe parent et la sous-chaîne enfant que vous recherchez. Mais en supposant que vous ayez les deux, vous pouvez rendre le spectacle un peu générique. Vous pouvez toujours dire à jQ de rechercher des enfants avec une sous-chaîne dans un parent.

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

Un violon pour vous: https://jsfiddle.net/dvdxt58f/1/

Answer 3

La façon la plus efficace est celle proposée par charlietfl mais il y a une autre façon de le résoudre.

(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);  

Fondamentalement, vous utilisez le sélecteur * et que vous créez:

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

j'ajouté celui-ci comme il pourrait être utile dans certaines occasions, même quand je vais avec la réponse de charlietfl.

Démo: https://jsfiddle.net/tdo9go2q/11/