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

Question

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

我正在尝试为 search.php 页面打开一个 fancybox 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);
   }

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

Use JS variable for fancybox data-src value

javascript

html

variables

iframe

fancybox-3