Question

我在页面上有一些具有不同ID的多个单选按钮。根据选择的值，必须显示上传按钮或文本框。但是因为它几乎是相同代码的10倍（唯一的区别是数字）我正在寻找一个可以重用代码的解决方案。

两个无线电扫描示例：

<input type="radio" name="typePhoto2" id="foto2" value="photo"> 
<input type="radio" name="typePhoto2" id="video2" value="video">

<input type="radio" name="typePhoto3" id="foto3" value="photo"> 
<input type="radio" name="typePhoto3" id="video3" value="video">

我知道有一种方法可以使用带有*的jQuery来选择多个元素，但我想要的是使用'*'的值来提供选择的数字。

$("[id^=typePhoto]").click(function(){
        var value = [number after the id];
})

有办法做到这一点吗？否则，我必须复制10次相同代码的粘贴，只有一个数字作为差异。

Answer 1

您需要修复选择器以使用name属性值以typePhoto开头来定位所有元素。然后使用单击的元素上下文获取当前id并使用.replace()删除静态部分：

$("[name^=typePhoto]").click(function(){
    var value = this.id.replace("foto","").replace("video","");
});

工作代码段

$("[name^=typePhoto]").click(function(){
    var value = this.id.replace("foto","").replace("video","");
    console.log(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="typePhoto2" id="foto2" value="photo"> 
<input type="radio" name="typePhoto2" id="video2" value="video">

<input type="radio" name="typePhoto3" id="foto3" value="photo"> 
<input type="radio" name="typePhoto3" id="video3" value="video">

Answer 2

您始终可以通过事件对象获取当前目标的ID，然后用一点正则表达式完成：

＆＃13;

  
 $("[id^='foto']").click(function(e){
      var id = e.currentTarget.id
      var value = id.match(/[0-9]$/)[0];
      console.log(value)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="typePhoto2" id="foto2" value="photo"> 
<input type="radio" name="typePhoto3" id="foto3" value="photo">

＆＃13;

Answer 3

你可以尝试：

$('[id*="typePhoto"]')

或

$('input[type="radio"]');

干杯

Answer 4

更好的方法是给他们所有相同的课程。例如class =＆＃34; photo-button＆＃34;。然后你可以使用：

$(".photo-button").click(function(){...})

Answer 5

试试这个

$( "input[name*='typePhoto']" ).click( function(){
// your code
});

jQuery选择器与asteriks

5 个答案: