Question

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

我正在尝试为search.php页面打开一个fancybox iframe。我有一个问题，感觉它应该是如此简单但无法克服 - 我无法弄清楚如何将fancybox使用的data-src值更新为包含搜索输入的URL 。我在js变量中有我需要的完全解析的URL，但是我无法弄清楚如何获得数据-src＆＃39;使用它。如果我在引号中对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>

这是onclick函数，我在其中构建包含搜索输入的解析URL。带有我需要使用的完整网址的JS变量是＆＃39; searchinput＆＃39;：

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,
});

我希望你能提供帮助。我需要将“url”字符串值存储在＆＃39; searchinput＆＃39; searchstuff（）中的变量由＆＃39; data-src＆＃39;在searchbtn输入元素中。欢呼声。

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值

1 个答案: