在类等于活动的地方获取价值 [英] Get value where class equals active

问题描述

已解决 确定该问题仅在我们使用的平台上，因此提供的所有答案可能都是正确的.

RESOLVED It was determined that the issue is only on the platform we use thus all answers provided could be probably be right.

在将var插入字符串中添加了关于同一问题的另一个问题

我正在努力寻找针对我们网站上搜索查询的解决方案.它由选项卡式选项组成，然后可以选择某些特定信息.在选择细节之前选择了两个或多个选项卡时，所有选项卡选择都将包含在搜索结果中.我们只想显示最后选择的标签的结果.

I'm struggling to find a solution to a search query we have on our website. It consists of a tabbed selection where certain specifics then can be selected. When two or more tabs have been selected before selecting the specifics, all tab selections are included in the search results. We want to only show results for the last selected tab.

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>

选择选项卡后，会将其添加到活动类:

When a tab is selected it adds it to class active:

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

注意:编辑行是我进行大多数测试的地方.

NOTE: The edit line is where most of my testing happens.

如上所述，该脚本显示了在搜索选择之前每个选项卡单击的结果.

As said, this script as said, show results for each tab click before search selection.

在编辑行，我尝试了在Stack Overflow和Internet上的多个脚本.其中一些(非常混淆):

At the edit line I have tried multiple scripts as found on Stack Overflow and over places on Internet. Some of these (quite mixed up):

//      $("#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结果为:

With this script the URL result is:

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

URL结果应为:

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

对于解决此搜索问题的任何帮助，将不胜感激.

Any assistance to resolve this search issue will be greatly appreciated.

供参考的首页链接:

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

推荐答案

据我对您的预期URL结果与实际URL结果的了解，问题应该出在您的replace方法中.尝试使用修改后的regex:

From what I understand with your expected vs actual URL result, the problem should be in your replace method. Try with modified regex:

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

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

[^\&]* : it will look for all characters expect & (next set of query params)

鉴于一次仅一个选项卡处于活动状态(从代码显而易见)，并且假定第二个代码块也位于setActiveTab功能块内，则只需替换字符串/search?q=.这会将href修改为

Given that only one tab is active at a time (evident from code) and assuming that the second code block is also inside setActiveTab function block, you are only replacing the string /search?q=. This will be modifying the href as

/search?q=model1%20

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

Now clicking on model 2, will replace only the /search?q= portion, modifying to:

/search?q=model2%20model1%20

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

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

这篇关于在类等于活动的地方获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！