javascript - 当一个元素的 id 都以相同的两位或三位数字结尾时，如何获取一个元素的内容并添加到另一个元素？

Question

我有这个代码：

$('.update-title')
    .change(function () {
        $(this).prop('title', $('option:selected', this).prop('title'));
    });

这个HTML：

<select id="modal_TempRowKey_14" class="update-grid update-title">
...
...
</select>

<input id="modal_Title_14" class="update-grid" type="text" value="xx">

我是否可以这样做，以便当 .update-title 更改时，将标题的值放入具有匹配编号的输入 id 中。所以在这种情况下，#modal_TempRowKey_14标题会变得#modal_Title_14有价值

重要的

我希望只有在被更改的元素以 . 开头时才会发生这种情况modal_TempRowKey。这可以放入更改块吗？

Answer 1

尝试

$('.update-title').on("change", function() {
    var id = this.id.replace('modal_TempRowKey_', '');  
    $("#modal_Title_" + id).val( $(this).val() );
});

Answer 2

id我的建议是使用 jQuery 的data函数，而不是尝试解析属性。

编辑您的 HTML，使select菜单具有一个data-target属性：

<select id="modal_TempRowKey_14" data-target="#modal_Title_14" class="update-grid update-title">
...
...
</select>

然后，像这样创建您的事件处理程序：

$('.update-title').on('change',function() {
    var $this = $(this);
    $($this.data('target')).val($this.val());
})

您使用该data-target属性来查找要应用select菜单值的元素。

这是一个演示：

--- jsFiddle 演示 ---

Answer 3

$('.update-title').change(function () {
    var m = this.id.match(/^modal_TempRowKey_(\d+)$/);
    if (m) {
        $("#modal_Title_" + m[1]).val(this.id);
    }
});​

演示。

Answer 4

其他人有更优雅的方法，这是我的尝试：

http://jsfiddle.net/8sLCL/1/

$('.update-title')
    .change(function () {
        var my_text = $(this).find(":selected").text();
        var my_id = $(this).attr("id");
        var my_num_pos = my_id.lastIndexOf("_");
        var my_num = my_id.substr(my_num_pos + 1 ,my_id.length - my_num_pos  );
        $( "#modal_Title_" + my_num ).val(my_text );
});​