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

【问题标题】：How to replace jquery attr multiple times from input如何从输入中多次替换jquery attr
【发布时间】：2017-03-11 20:57:38
【问题描述】：

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

简化：我希望当用户第一次写入输入字段“flower”并按下按钮时打开http://example.com/flowertherest/，第二次当用户输入“car”并单击按钮后打开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 />

【问题讨论】：

你可以发布你的click函数吗？
txtName 已设置，但之后未使用。你可以解释吗？这可能只是一个错误。
我只是通过将我的代码编辑到这里来制造这个错误。我现在对其进行了简化/编辑。
你在你的函数中尝试过window.location.href = urli吗？

标签： javascript jquery html

【解决方案1】：

@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>

【讨论】：

在控制台日志中正常工作，但仍然总是打开第一个输入的地址。
你能显示 id 'fan' 是什么吗？只是想看看如何期望遵循 url...我还 @DrKey 提到了另一个选项，使用：window.location.href 来导航..
那个 window.location.href 正在工作，但我想在这种情况下使用 fancybox。现在它在第一次按下按钮时已经正确触发了。
Fancybox 今天早上得到了一些更新，之后即使没有修改也一切正常！ :-D 谢谢上帝。但也对此进行了测试，并且效果更好。

【解决方案2】：

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

$('#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

});

【讨论】：

【解决方案3】：

1) 像$('#txtName').val();这样使用id获取文本值

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 />

【讨论】：

这在控制台日志中也可以正常工作，但在网络选项卡中我总是看到相同的（第一个输入的）页面打开...
<fieldset> <p><label>SHORT Text</label></p> <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" /> </fieldset> <script type="text/javascript" src="../js/pagescriptwhereisjavascript.js?v=3"></script> <script type="text/javascript" src="../js/fancybox.js"></script>