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>

因此，当人们点击任何颜色类时，页面将在网址中重定向并带有相应的颜色，并带有以下内容：

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

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

这样的网址

然后我必须将名为选择的班级名称添加到相应的内部颜色。

所以我写下面的代码：

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

但如果我的网址 http://www.example.com/?color=red%2Cgreen ，我可以将选定的类添加到两者中...即将所选类添加到红色和绿色中
如果我的网址是 http://www.example.com/?color=red%2Cgreen ，并且有人再点击绿色，那么我该如何从网址中删除绿色并仅将所选内容添加到红色。

任何帮助将不胜感激。

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

考虑一下这是否是一个表单，您可能会有类似的内容：

＆＃13;

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

＆＃13;

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

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

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

在您的示例中，您将在一个变量中传递单个字符串，并使用分隔符。你需要首先得到字符串，然后拆分它。同样，这将导致可以迭代的数组。

如果用户取消选中其中一个选项，删除selected，则可以从阵列中删除该元素。

我的建议：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

希望有所帮助。

根据使用jQuery的选定数据获取并放置url到url

2 个答案: