获取类等于活动的值

时间:2018-01-09 10:36:36

标签: javascript jquery

分辨 确定问题仅在我们使用的平台上,因此所提供的所有答案可能都是正确的。

Insert a var into a string

添加了有关同一问题的其他问题

我很难找到我们网站上搜索查询的解决方案。它由一个选项卡式选项组成,然后可以选择某些特定的选项。如果在选择细节之前选择了两个或更多选项卡,则所有选项卡选项都将包含在搜索结果中。我们只想显示上次选择的标签的结果。

我们的部分HTML:

<div class="searchTabContainer col-xs-7" id="searchTabContainer">
    <div class="searchTab" id="searchTab1" onclick="javascript:return setActiveTab(1);">Model 1</div>
    <div class="searchTab" id="searchTab2" onclick="javascript:return setActiveTab(2);">Model 2</div>
    <div class="searchTab" id="searchTab3" onclick="javascript:return setActiveTab(3);">Model 3</div>
    <div class="searchTab" id="searchTab4" onclick="javascript:return setActiveTab(4);">Model 4</div>
    <div class="searchTab" id="searchTab5" onclick="javascript:return setActiveTab(5);">Model 5</div>
</div>

选择标签后,它会将其添加到活动类:

    function setActiveTab(x) {
        for (i = 1; i < 6; i++) {
            $("#searchTab" + i).removeClass('active');
            searchURL = "";
            if (window.location.pathname.indexOf('specials') > -1) {
                collectionURL = "/collections/";
            }
            else {
                collectionURL = "/collections/";
            }
        }
        $(".Filter").find("input[type=text], textarea, select").val("");
        $("#searchTab" + x).addClass('active');
        if (x == 0){
                searchBrand = ""
        }
        else if (x == 1) {
                searchBrand = "model1"
        }
        else if (x == 2) {
                searchBrand = "model2"
        }
        else if (x == 3) {
                searchBrand = "model3"
        }
        else if (x == 4) {
                searchBrand = "model4"
        }
        else if (x == 5) {
                searchBrand = "model5"
        }

然后它包括搜索部分:

//edit line//
     var searchBran = searchBrand;
//end edit line//

$('.homePageProducts a').each(function(){
  var newurl = $(this).attr('href').replace('/search?q=','/search?q='+searchBran+'%20');
  $(this).attr('href', newurl);
});

    goToByScroll();

    return false;
}

注意:编辑行是我的大部分测试发生的地方。

如前所述,这个脚本如上所述,在搜索选择之前显示每个标签点击的结果。

在编辑行中,我尝试了多个脚本,如Stack Overflow和Internet上的位置。其中一些(相当混乱):

//      $("#searchTab" + x).find(".active").each(function(){
//      $('.active').each(function() { 
//      $(".searchTab.active").each(function(){
//          var searchBran = searchBrand;
//      });
//var searchBran = $('.searchTab').filter('.active');
//var searchBran = $('.searchTab.active');

使用此脚本,URL结果为:

https://www.sactrucks.co.za/search?q=model1%20model2%20selection5&type=product

网址结果应为:

https://www.sactrucks.co.za/search?q=model2%20selection5&type=product

非常感谢您解决此搜索问题的任何帮助。

主页链接供参考:

&#13;
&#13;
<p>
  <a href="/search?q=engine%20oil%20sump&type=product">Oil Sump</a>
</p>
<p>
  <a href="/search?q=engine%20alternator&type=product">Alternator</a>
</p>
<p>
  <a href="/search?q=engine%20intake%20and%20exhaust%20manifold&type=product">Intake & Exhaust Manifold</a>
</p>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

根据我对您的预期与实际网址结果的理解,问题应该在您的replace方法中。尝试使用修改后的regex

$(this).attr('href').replace(/\/search\?q=[^\&]*/, '/search?q=' + searchBran + '%20');

[^\&]*:它会查找所有期望&的字符(下一组查询参数)

假设一次只有一个选项卡处于活动状态(从代码中显而易见)并假设第二个代码块也在setActiveTab功能块内,则只替换字符串/search?q=。这将修改href

/search?q=model1%20

现在点击模型2,将仅替换/search?q=部分,修改为:

/search?q=model2%20model1%20

&#13;
&#13;
function setActiveTab(x) {
  /*for (i = 1; i < 6; i++) {
    $("#searchTab" + i).removeClass('active');
    searchURL = "";
    if (window.location.pathname.indexOf('specials') > -1) {
      collectionURL = "/collections/";
    } else {
      collectionURL = "/collections/";
    }
  }*/
  // refactoring the above loop with below line as it is not affecting the OP question
  $(".searchTab").removeClass("active");
  $(".Filter").find("input[type=text], textarea, select").val("");
  $("#searchTab" + x).addClass('active');
  if (x == 0) {
    searchBrand = ""
  } else if (x == 1) {
    searchBrand = "model1"
  } else if (x == 2) {
    searchBrand = "model2"
  } else if (x == 3) {
    searchBrand = "model3"
  } else if (x == 4) {
    searchBrand = "model4"
  } else if (x == 5) {
    searchBrand = "model5"
  } //edit line//
  var searchBran = searchBrand;
  //end edit line//


  $('.homePageProducts a').each(function() {
    var newurl = $(this).attr('href').replace(/\/search\?q=[^\&]*/, '/search?q=' + searchBran + '%20');

    // only for display
    $("#newUrl").prepend("<p>" + newurl + "</p>");

    $(this).attr('href', newurl);
  });

  // goToByScroll();

  return false;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchTabContainer col-xs-7" id="searchTabContainer">
  <div class="searchTab" id="searchTab1" onclick="javascript:return setActiveTab(1);">Model 1</div>
  <div class="searchTab" id="searchTab2" onclick="javascript:return setActiveTab(2);">Model 2</div>
  <div class="searchTab" id="searchTab3" onclick="javascript:return setActiveTab(3);">Model 3</div>
  <div class="searchTab" id="searchTab4" onclick="javascript:return setActiveTab(4);">Model 4</div>
  <div class="searchTab" id="searchTab5" onclick="javascript:return setActiveTab(5);">Model 5</div>
</div>

<div class="homePageProducts">
  <a href="/link1/search?q=null&abc=123&xyz=456">Link 1</a>
  <a href="/link2/search?q=null&abc=222">Link 2</a>
</div>


<div id="newUrl"></div>
&#13;
&#13;
&#13;