상위 클래스를 사용하고 하위 클래스의 중간 부분을 얻으십시오

Question

Joomla의 새 SubForm 코드로 작업하고 있습니다. 이를 통해 사용자는 일련의 입력을 복제하고 다시 사용할 수 있습니다. 기본적으로 반복 가능한 형식입니다. 이 양식은 다음 구조를 만듭니다.

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

.

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

을하지만 더 나은 방법이 있어야합니다 :

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

지금은 offcourse 각 요소에 대해 다음과 같이 수동으로 추가 할 수 있습니다.

내가 원하는 것은 무엇입니까?

1. 추가 정보
   1. 의 .parents(.subform-repeatable-group)

   비트가 또 다른이 나는 동급 __dc_에서 다음 문자/기호가 가지고있는 모든 항목에 .hide() 기능을 사용하려면 테마는 __dc_이 아니지만 __threed_라고하며 문자/기호를 정의 할 수 있어야합니다.

2. 전 (前)의 X 위치 또는 뒤의 X 위치로 무언가를 사용할 수 있는지는 이미 확인했지만 계속 변화하고 있습니다.

도움을 주신 모든 분들께 감사드립니다.

평상시와 같이 더 많은 결과가 나올 때마다 계속해서이 게시물을 검색하고 업데이트 할 예정입니다.

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가 던진 클래스를 많이 제어 할 필요가 없다고 가정 할 때 부모 클래스와 하위 하위 문자열을 캡처하는 방법을 구축해야 할 필요가 없다고 가정합니다. 그러나 당신이 그 두 가지를 모두 가지고 있다고 가정한다면, 당신은 그 쇼를 조금 비공식적으로 만들 수 있습니다. 부모 안에 하위 문자열이있는 하위 항목을 찾도록 jQ에 지시 할 수 있습니다.당신을 위해

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

바이올린은 : 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/