使用 jQuery 根据所选数据获取参数并将其放入 url

Question

我有以下 <div> 结构：

<div class="color-class" data-color="red">
   <div class="inside-color">Red</div>
</div>
<div class="color-class" data-color="green">
    <div class="inside-color">Green</div>
</div>
<div class="color-class" data-color="blue">
    <div class="inside-color">Blue</div>
</div>

因此，当人们点击任何颜色 class 时，页面将以 url 中相应的颜色重定向，如下所示：

var color=urlObj.searchParams.get("color");

$(".color-class").on("click",function(){
    if( $(this).find(".inside-color").hasClass("selected")){
        location.href=location.href.replace(/&?color=([^&]$|[^&]*)/i, "");
    }
    else {
        var se_val=$(this).data("color");
        $(this).find(".inside-color").addClass("selected");

        if ( !color ){
            if(url.indexOf("?") >= 0){
                url =url+"&color="+se_val;
            }
            else {
                url =url+"?color="+se_val;
            }
            window.location.href=url;
            return;
        }
        if ( color){
            urlObj.searchParams.set("color", color+","+se_val);
            window.location.href=urlObj;
            return;
        }
    }
});

所以使用这个代码我可以重定向所以在我重定向之后我得到 url 就像 example.com/?color=red

那我还要在对应的inside-color.

中加上class name called selected

所以我写了下面的代码：

if ( color ){
    $(".color-class[data-color='"+color+"']").find(".inside-color").addClass("selected");
}

但是如果我的 url 是 http://www.example.com/?color=red%2Cgreen 我该如何添加 selected class两者... 即添加选定的 class 到红色和绿色，
如果我的 url 是 http://www.example.com/?color=red%2Cgreen 并且有人再次点击绿色那么我怎样才能从 url 和仅将所选内容添加到红色。

任何帮助将不胜感激。

Answer 1

好的，试试这样的操作，我只是发布了您的部分代码

    var color=urlObj.searchParams.get("color"); 
    if ( color ){
    var splitColors = color.split('%2C');
    for(var i=0;i<splitColors.length;++i)
{
 $(".color-class[data-color='"+splitColors[i]+"']").find(".inside-color").toggleClass("selected");
} 
}

Answer 2

考虑一下，如果这是一个表格，您可能会有这样的东西：

<form action="example.com" method="get">
  <input type="checkbox" class="inside-color" name="inside-color[]" value="red" /><label>Red</label>
  <input type="checkbox" class="inside-color" name="inside-color[]" value="green" /><label>Green</label>
  <input type="checkbox" class="inside-color" name="inside-color[]" value="blue" /><label>Blue</label>
  <button type="submit">Go</button>
</form>

这将创建一个编码的 URL，例如：

example.com?inside-color%5B%5D=red&inside-color%5B%5D=green

这是通过GET 传递数组的方法。一种选择是在此方法中传递详细信息并对其进行解析。这样做会产生一个小数组，然后您可以在每种特定颜色上迭代数组集 selected。

在您的示例中，您在一个变量中传递了一个字符串，并使用了分隔符。 Sp 你需要先获取字符串然后拆分它。同样，这将生成一个可以迭代的数组。

如果用户取消选中其中一个选项，删除 selected，您就可以从数组中删除该元素。

我的建议：

function setSelections(c) {
  $.each(c, function(k, v) {
    if (v) {
      $(".color-class[data-color=" + k + "]").addClass("selected");
    }
  });
}

$(function() {
  var colors = {
    red: 0,
    green: 0,
    blue: 0
  };
  $(".color-class").click(function() {
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
      colors[$(this).attr("data-color")] = 0;
    } else {
      $(this).addClass("selected");
      colors[$(this).attr("data-color")] = 1;
    }
  });
  $("#save-selection").click(function(e) {
    e.preventDefault();
    var url = "http://example.com/?" + $.param(colors);
    console.log("URL: " + url);
  })
});

.color-class {
  width: 40px;
  height: 40px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin: 2px;
}

.color-class:hover {
  border-color: #a0a0a0;
}

.color-class.selected {
  border-color: #202020;
}

.color-class .inside-color {
  border-radius: 3px;
  width: 100%;
  height: 70%;
  color: white;
  font-size: 75%;
  text-align: center;
  padding-top: 30%;
}

.color-class .inside-color.red {
  background: red;
}

.color-class .inside-color.green {
  background: green;
}

.color-class .inside-color.blue {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-class" data-color="red">
  <div class="inside-color red">Red</div>
</div>
<div class="color-class" data-color="green">
  <div class="inside-color green">Green</div>
</div>
<div class="color-class" data-color="blue">
  <div class="inside-color blue">Blue</div>
</div>
<button id="save-selection">Save</button>

控制台显示：URL：http://example.com/?red=1&green=1&blue=0 这将更容易解析回可与 setSelections() 函数一起使用的对象。

希望对您有所帮助。

使用 jQuery 根据所选数据获取参数并将其放入 url

Get and put paramter to url based on slected data using jQuery

html

javascript

jquery

jquery-selectors