使用 JS 变量作为 fancybox data-src 值

Question

我有一个可扩展的搜索栏，它收集用户的搜索输入，然后将他们重定向到一个以搜索为中心的 php 页面，搜索他们的输入已经显示。效果很好。

我正在尝试为 search.php 页面打开一个精美的 iframe。我有一个问题，感觉它应该如此简单但无法克服 - 我无法弄清楚如何将 fancybox 使用的 data-src 值更新为包含搜索输入的 URL。我在 js 变量中有我需要的完全解析的 URL，但我不知道如何让 'data-src' 使用它。如果我用引号对 URL 进行硬编码，它会按照我想要的方式工作，所以我只需要帮助弄清楚如何使用我的 JS 字符串变量而不是硬编码的 URL。

这是我的搜索输入 html：

<div class="infobarsearch-container">
   <div id="sb-search" class="sb-search">
      <form id="tfnewsearch" method="get" action="">

          <input class="sb-search-input" placeholder="Search..." type="search" value="" name="q" id="search">

          <input id="searchbtn" name="searchbtn" class="sb-search-submit" type="submit" onclick="searchstuff()" value="" data-fancybox data-type="iframe" data-src="THIS NEEDS TO BE THE VALUE OF SEARCHINPUT FROM SEARCHSTUFF()" data-caption="My Caption">

          <span class="sb-icon-search"></span>
      </form>
   </div>
</div>

这是我构建包含搜索输入的已解析 url 的 onclick 函数。我需要使用的具有完整 url 的 JS 变量是“searchinput”：

function searchstuff()
   {
      var searchinp = document.getElementById('search');
      searchinput = "inputs/search.php?search=" + searchinp.value;
      alert("searchinput: " + searchinput);
   }

这是页面上用于此用途的fancybox初始化：

$('[data-fancybox]').fancybox({
   toolbar  : false,
   smallBtn : true,
   afterClose: function () {
      parent.location.reload(true);
   }

$(".searchbtn").fancybox({
   toolbar  : false,
   smallBtn : true,
});

希望你能帮上忙。我需要获取存储在 searchstuff() 中的 'searchinput' 变量中的 url 字符串值，以供 searchbtn 输入元素中的 'data-src' 使用。干杯。

Answer 1

将 setAttribute 添加到您的点击事件处理程序，例如：

document.querySelector('#searchbtn').setAttribute('data-src',searchinput);


function searchstuff()
   {
      var searchinp = document.getElementById('search');
      var searchBtn = document.querySelector('#searchbtn');
      var searchinput = "inputs/search.php?search=" + searchinp.value;
      searchBtn.setAttribute('data-src',searchinput);
      alert("searchinput: " + searchinput);
   }