자바 스크립트 중복 ID 충돌

-1

여러 양식 필드에서이 js 스크립트를 여러 번 사용해야합니다. 한 필드에서 훌륭하게 작동하지만 동시에 다른 필드에서이 스크립트를 사용하여 복제하는 방법을 모르겠습니다. 모든 확인란에는 RegEx 완료를 위해 미리 정의 된 값이로드됩니다. 따라서 아래의 모든 코드는 하나의 양식 필드에 속합니다. 일부 클래스 attrbiute 값을 가진 하나 개의 컨테이너에자바 스크립트 중복 ID 충돌

<head> 

<!-- CHECKBOXSES REGEX 1 --> 

<script type="text/javascript"> 

function getVal(bu){ 

var el=document.getElementById('col12_filter_prospective'); 
var i=0, c;while(c=document.getElementById('chk'+(i++))) 
{el.value=(bu.checked)? bu.value : null;c!=bu? c.checked =false : null; 
} 
} 
</script> 

</head> 

<body> 

<input type="checkbox" name="chk" value="[^***]" id="chk0" onclick="getVal(this)" title="[^***] Replace (***) with the word to excluded from search."> 
<input type="checkbox" name="chk" value="/whatever[^s]*./" id="chk1" onclick="getVal(this)" title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination."> 
<input type="checkbox" name="chk" value="/***/" id="chk2" onclick="getVal(this)" title="/***/ Replace *** for specific word to be found."> 

<br> 
<input type="text" class="column_filter_prospective" name="col12_filter_prospective" id="col12_filter_prospective"> 

</body>

출처

2014-12-04 Paulo Lopes

와우, 그 코드는 엉망입니다. 내가 해독 할 수있는 것으로부터, 이것은 정규 표현식과는 아무런 관련이 없습니다. 선택한 체크 박스의 값을 텍스트 상자에 복사하는 것입니까? –

장소 양식 요소, 그들의 이름 또는 클래스 ATTR (NOT ID로 자식 요소를 찾기 위해 querySelector를 사용하여, 지정된 이름의 클래스를 가진 모든 용기를 발견, HTML에 여러 개의 컨테이너를 삽입).

출처

2014-12-04 19:48:43 FLCL

매력처럼 작동했습니다. 다시 감사드립니다. :-) –

@PauloLopes, 문제 해결시 올바른 답변 중 하나를 표시 할 수 있습니다 – FLCL

hummm, 확실하게 어떻게합니까? –

먼저 코드를 좀 더 읽기 쉽도록 포맷합니다. 변경 사항은 다음과 같습니다.

getVal() 메서드는 이제 2 개의 매개 변수를받습니다. 두 번째 매개 변수는 관련 텍스트 입력 필드의 ID입니다.

모든 체크 박스 ID를 제거하고 모든 체크 박스에 클래스를 추가하십시오 (모든 체크 박스에 "chk0"라는 클래스를 추가합니다).

<input type="checkbox" name="chk" value="[^***]" class="chk1" 
 
    onclick="getVal(this, 'col13_filter_prospective')" 
 
    title="[^***] Replace (***) with the word to excluded from search."> 
 

 
<input type="checkbox" name="chk" value="/whatever[^s]*./" class="chk1" 
 
    onclick="getVal(this, 'col13_filter_prospective')" 
 
    title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination."> 
 

 
<input type="checkbox" name="chk" value="/***/" class="chk1" 
 
    onclick="getVal(this, 'col13_filter_prospective')" 
 
    title="/***/ Replace *** for specific word to be found."> 
 

 
<br> 
 
<input type="text" 
 
    class="column_filter_prospective" 
 
    name="col13_filter_prospective" 
 
    id="col13_filter_prospective">

다음과 같이

수정 getVal() 방법

<head> 
 
    <!-- CHECKBOXSES REGEX 1 --> 
 

 
    <script type="text/javascript"> 
 
    function getVal(bu, id){ 
 
     var el = document.getElementById(id); 
 
     
 
     var checkboxes = document.getElementsByClassName(bu.className); 
 
     for (i = 0; i < checkboxes.length; i++) { 
 
     el.value = (bu.checked)? bu.value : null; 
 
     checkboxes[i] != bu ? checkboxes[i].checked = false : null; 
 
     } 
 
    } 
 
    </script> 
 

 
</head> 
 

 
<body> 
 

 
    <input type="checkbox" name="chk" value="[^***]" class="chk0" 
 
    onclick="getVal(this, 'col12_filter_prospective')" 
 
    title="[^***] Replace (***) with the word to excluded from search."> 
 
    
 
    <input type="checkbox" name="chk" value="/whatever[^s]*./" class="chk0" 
 
    onclick="getVal(this, 'col12_filter_prospective')" 
 
    title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination."> 
 
    
 
    <input type="checkbox" name="chk" value="/***/" class="chk0" 
 
    onclick="getVal(this, 'col12_filter_prospective')" 
 
    title="/***/ Replace *** for specific word to be found."> 
 

 
    <br> 
 
    <input type="text" 
 
    class="column_filter_prospective" 
 
    name="col12_filter_prospective" 
 
    id="col12_filter_prospective"> 
 
</body>

을 다음과 같이 새로운 입력을 추가 할 수 있습니다 0

그것이 작동하는지 알고 싶습니다.

출처

2014-12-04 19:49:28 Hoa

우수합니다, 네, 볼 수 있습니다. –

해결하고자하는 또 다른 문제가 있습니다. 나는 인터넷을 옆으로 내리고 단순한 루틴이지만이 타스크를 수행하기에 적당한 스크립트를 찾을 수 없었다. –

ID 문제 구현 후 코드를 보았을 때 "스마트 검색"확인란을 자동으로 선택 해제하고 세 가지 RegEx 체크 박스 중 하나를 클릭하면 세 가지 체크 박스 중 하나를 선택 해제하면 RegEx 체크 박스를 선택하고 싶습니다 모든 항목을 원래 상태로 돌리면 "스마트 검색"체크 상자 만 다시 선택됩니다. 너무 혼란 스럽습니까? –

해결하려는 다른 문제가 있습니다. 나는 인터넷을 옆으로 내리고 단순한 루틴이지만이 타스크를 수행하기에 적당한 스크립트를 찾을 수 없었다. - Paulo Lopes 26 분 전

ID 문제 구현 후 코드를 확인한 후 "스마트 검색"확인란을 자동으로 선택 취소하고 RegEx 확인란을 클릭하면 3 번째 RegEx 확인란이 선택됩니다. 3 개의 체크 박스 중 하나가 선택 취소되어 모든 것을 "스마트 검색"체크 박스가 다시 선택된 유일한 상태 인 원래 상태로 전환합니다. 너무 혼란 스럽습니까? - 파울로 로페스 22 분 전

<tr id="filter_col12_prospective" data-column="12">   
<td colspan="4"><hr width="100%" size"0.5px"> 
</td>   
<tr> 
<tr> 
<td>City</td> 
<td align="center">    
<input type="checkbox" name="chk" value="[^***]" id="chk0" onclick="getVal(this)" title="[^***] Replace (***) with the word to excluded from search."> 
<input type="checkbox" name="chk" value="/whatever[^s]*./" id="chk1" onclick="getVal(this)" title="/whatever[^s]*./ Find (whatever) word that ends with (s) or any other combination."> 
<input type="checkbox" name="chk" value="/***/" id="chk2" onclick="getVal(this)" title="/***/ Replace *** for specific word to be found."> 
<br> 
<input type="text" class="column_filter_prospective" name="col12_filter_prospective" id="col12_filter_prospective"> 
</td>    
<td align="center" valign="top"><input type="checkbox" class="column_filter_prospective" id="col12_regex_prospective"> 
</td> 
<td align="center" valign="top"><input type="checkbox" class="column_filter_prospective" id="col12_smart_prospective" checked="checked"> 
<br> 
</td> 
</tr>

=========================== 예, 확인 고급 검색 [링크] http://goutam.webigniter.ca/datatable.html

출처

2014-12-06 18:29:05

자바 스크립트 중복 ID 충돌

답변

관련 문제