Question

“.each do”循环在rails表单上创建一些html 循环创建了一个复选框，其中包含“foo_1_blah”，“foo_2_blah”等ID，以及其ID中具有相似开头和匹配数字的其他元素。

使用通配符（），当其中一个与“ _blah”匹配的复选框发生更改时，如果该复选框的ID匹配：

/foo_1_*/

我想.hide（）匹配一些输入框：

/foo_1_barx_*/

/foo_1_bary_*/

我不想隐藏（）复选框。在某些语言中，我会做类似

的事情

/foo_(\n)_*/

然后我可以获得$ 1的数字并匹配

/foo_($1)_barx*/

/foo_($1)_bary*/

...但不确定如何在jQuery或javascript中使用dom-tree遍历执行此操作。如果有一种方法可以标记Rails表单来启用它，那也可以。

Answer 1

在jQuery中，我相信$("input:not(:checkbox)[id|=foo_1_bar]").hide()会起作用。

这是选择所有不是复选框的input标记（:not(:checkbox)），并且标识为以foo_1_bar（[id|=foo_1_bar]）开头。我不认为你可以使用通配符，但css选择器可以给你更多的灵活性。有关css选择器的更多信息，请查看here和here。

Answer 2

我结合了jQuery和Javascript的正则表达式来解决这个问题。这里： http://jsfiddle.net/HbtjZ/31/

.change（）检测结合了jquery选择器，仅检测对相关复选框的更改。 Javascript用于从该复选框的ID字段中提取数字并构建用于ID的字符串 - 选择我想隐藏的文本div（它们实际上是输入框，但在任何一种情况下都与ID匹配）。

我没有找到一种方法来正则表达式选择div并将它们串联切换，使用类似的东西：

var matchString = 'input:not(:checkbox)[id^="foo_' + myNumber + '_"]' $(matchString).toggle()

这似乎只匹配一个实例 - 复选框，然后根据'not'忽略它; 我使用每个与ID匹配的div的切换线来解决此问题。

这里有一个很好的分析console.log输出以检查进度

脚本：

$(function(){
  $("input[type='checkbox'][id^='foo_']").change(function(){

    foundID = $(this).attr('id')
    console.log('We Found ID ' + foundID);

    var myMatch =  foundID.match(/foo_(\d+)_barx*/);
    var myNumber = myMatch[1]
    console.log('We Found Number ' + myNumber);

    var matchStringA = '#foo_' + myNumber + '_baz'
    var matchStringB = '#foo_' + myNumber + '_bay'  
    console.log('JQ ID String To Match ' + matchStringA + ' and ' + matchStringB);

    $(matchStringA).toggle()
    $(matchStringB).toggle()
  });
});

HTML：

<input type="checkbox" id="foo_1_bar"/>

<div id="foo_1_baz">
Toggle This Visibility With Checkbox #1 Change
</div>

<div id="foo_1_bay">
Toggle This Visibility With Checkbox #1 Change
</div>

<input type="checkbox" id="foo_2_bar"/>

<div id="foo_2_baz">
Toggle This Visibility With Checkbox #2 Change
</div>

<div id="foo_2_bay">
Toggle This Visibility With Checkbox #2 Change
</div>

Jquery或Javascript - 通过ID匹配正则表达式元素并使用类似的ID更改其他元素

2 个答案: