Question

我是一名php开发人员，对javascript / jquery的经验很少。

基本上我有一个文本框和一个带有href的链接。当文本框中的用户“keyup”时，我希望链接中的href附加值。

但是我有多个文本框和链接应该一起更改。

<tr>
    <td>
        <div class="chapter_update">
            <form>
                <input class="target" type="text">
            </form>
        </div>
    </td>
</tr>
<tr>
    <td>
        <a class="link" href="/index.php/cases?id=5">The link</a>
    </td>
</tr>
<tr>
    <td>
        <div class="chapter_update">
            <form>
                <input class="target" type="text">
            </form>
        </div>
    </td>
</tr>
<tr>
    <td>
        <a class="link" href="/index.php/cases?id=5">The link</a>
    </td>
</tr>

好的，在看到基本设置后，让用户输入第一个文本框“23-27”。现在我希望将其添加到链接href中。所以它将附加“＆amp; chapter =（它们在文本框中的类型）”。

我如何在jquery中实现这一点？。

我尝试了一些事情，我的最后一次尝试如下：

<script>
    $('.target').keyup(function(){
        var currentHref = $('.link').attr("href");
        $(this).parents('tr').next('tr').closest('.link').attr("href", currentHref + $(this).val());
    });
</script>

任何帮助都会非常感谢你。

Answer 1

在搜索.link之前，您走的是正确的路径。要在jQuery中搜索直接/嵌套子项，请使用find()

$('input').keyup(function() {
    var that = $(this);
    that.closest('tr').next('tr').find('.link').attr('href', function() {
        return $(this).attr('data-original-href') + that.val();
    });
});

另外，请注意，我们不会使用

设置属性

$('.link').attr("href");

因为有许多.link个元素。我们在找到 $(this)元素的上下文中使用.link

最后，使用custom data- *属性来保留原始href，如

 <a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>

＆＃13;

$('input').keyup(function() {
    var that = $(this);
    that.closest('tr').next('tr').find('.link').attr('href', function() {
        return $(this).attr('data-original-href') + that.val();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
  <tr>
    <td>
        <div class="chapter_update">
            <form>
                <input class="target" type="text">
            </form>
        </div>
    </td>
</tr>
<tr>
    <td>
        <a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
    </td>
</tr>
<tr>
    <td>
        <div class="chapter_update">
            <form>
                <input class="target" type="text">
            </form>
        </div>
    </td>
</tr>
<tr>
    <td>
        <a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
    </td>
</tr>
</table>

＆＃13;

Answer 2

试试这个，它实际上正在发挥作用。

$.each($('.link'), function(){
    $(this).attr('default', $(this).attr('href'));
});
$('.target').keyup(function (e) {
    var input = $(this);
    var closestlink = input.closest('tr').next('tr').find('.link');
    var linkHref = closestlink.attr('href'); // You aren't using this actually, but just in case you need to use the current href, not the default.
    var defaultHref = closestlink.attr('default');

    closestlink.attr('href', defaultHref + input.val());
});

https://jsfiddle.net/e8uLc9nm/1/

另一个选择是删除这部分

$.each($('.link'), function(){
     $(this).attr('default', $(this).attr('href'));
});

通过HTML为您的链接添加default标记或其他具有默认值的标记，这样您就不需要使用jQuery来设置默认值。

Answer 3

试试这个

＆＃13;

$(document).ready(function() {

  $('#txt').keyup(function(e) {

    $("a").attr("href", $("a").attr("href") + String.fromCharCode(e.which).toLowerCase());

    $("div").html($("a").attr("href"));

  });

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
<a href="&chapter=some_text_before_">some text for link</a>
<div>


</div>

＆＃13;

Jquery，不知道如何捕获我想要的元素

3 个答案: