Question

如何正确替换用户输入的jQuery attr？现在我得到的结果总是相同（用户的第一个输入）。我想我的代码现在总是将新数据属性添加到我的按钮，但浏览器只读取第一个。

简化为：当用户第一次写入输入字段＆＃34; flower＆＃34;然后按下按钮打开http://example.com/flowertherest/，第二次用户写入＆＃34; car＆＃34;然后在按钮点击后打开http://example.com/cartherest/。

我的Javascript

  function funCtion() {
    var url = $('#url').val();
    urli = '../url.php?url=http://example.com/'+url+'therest/';
    $('#fan').attr('data-src', urli); // sets
  }

我的HTML代码

    <input type ="text" id="txtName" placeholder="URL" class="form-control" />
    <input type ="button" id="fan" onclick="funCtion()" value="AVAA!" data-fancybox="group" data-caption="Fanseat" class="btn btn-default" /><br /><br />

Answer 1

希望此代码对您有所帮助。

$('#fan').click(function (e) { 
e.preventDefault();
var txtName = $('#txtName').val();
urli = '../url.php?url=http://example.com/'+txtName+'therest/';
$('#fan').attr('data-src', urli); // sets

}）;

Answer 2

1）使用id $('#txtName').val();

获取文本值

2）并将其与url连接

function funCtion() {
    var url = $('#txtName').val();
    urli = '../url.php?url=http://example.com/'+url+'therest/';
    $('#fan').attr('data-src', urli);
     console.log($('#fan').attr('data-src'));
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type ="text" id="txtName" placeholder="URL" class="form-control" />
    <input type ="button" id="fan" onclick="funCtion()" value="AVAA!" data-fancybox="group" data-caption="Fanseat" class="btn btn-default" /><br /><br />

Answer 3

@Kirit，已经发现它......问题更多的是文本输入的id应该是'url'而不是'txtName'或更改代码才能正确读取：

要确保您的数据刷新使用programatic api，这对我有用：

<input type ="text" id="url" placeholder="URL" class="form-control" />
    <input type ="button" id="fan" onclick="funCtion()" value="AVAA!"  />

<script type="text/javascript">

function funCtion() {
    var url = $('#url').val();
    urli = '../url.php?url=http://example.com/'+url+'therest/';

$.fancybox.open({
    src  : urli,
    opts : {
        caption : urli
    }
});
    console.log(urli)
  }

</script>

如何从输入中多次替换jquery attr

3 个答案: