时间戳

首页 > 解决方案 > 使用基于循环数据的 jQuery 选择 URL

jquery - 使用基于循环数据的 jQuery 选择 URL

问题描述

使用 PHP 我正在循环一些数据。我遇到的问题是尝试使用 jQuery 根据站点名称选择特定的 URL。

这是我设置的用于从 PHP 循环中收集数据的变量

 var attr = '{{ $review_site->site->name }}';
 var attrURL = '{{ $review_site->site_url }}';
 var attrID = '{{ $review_site->site_id }}';

 console.log("Sending to " + attr);
 console.log("URL is " + attrURL);
 console.log("Site ID is " + attrID);

这是我的控制台日志的样子

Google My Business
https://g.page/webpage
1
Facebook
https://www.facebook.com/pg/webpage/
2

第一行代表站点名称，第二行是 URL，最后是站点 ID。我正在尝试识别 Google My Business 网站，获取与之关联的 URL 并执行 window.location.replace

这是我到目前为止写的脚本，但它不起作用

if (status) {
        if (attr == 'Google My Business') {
            window.location.replace("{{ $review_site->site_url }}");
        }
}

这是循环数据结构的样子：

                                    var site = [{
                                    "id": 8,
                                    "user_id": 2,
                                    "site_id": 1,
                                    "site_url": "https:\/\/google.com",
                                    "created_at": "2019-12-19 12:56:46",
                                    "updated_at": "2021-07-12 03:36:15",
                                    "site": {
                                        "id": 1,
                                        "name": "Google My Business",
                                        "logo": "google_business.jpg",
                                        "created_at": "2019-08-27 12:09:35",
                                        "updated_at": "2019-08-27 12:09:35"
                                    }
                                }, {
                                    "id": 9,
                                    "user_id": 2,
                                    "site_id": 3,
                                    "site_url": "https:\/\/yelp.com",
                                    "created_at": "2020-02-12 10:05:29",
                                    "updated_at": "2021-07-12 03:36:30",
                                    "site": {
                                        "id": 3,
                                        "name": "Yelp",
                                        "logo": "yelp.png",
                                        "created_at": "2019-08-27 12:09:35",
                                        "updated_at": "2019-08-27 12:09:35"
                                    }
                                }, {
                                    "id": 19,
                                    "user_id": 2,
                                    "site_id": 2,
                                    "site_url": "https:\/\/facebook.com",
                                    "created_at": "2021-07-12 03:36:46",
                                    "updated_at": "2021-07-12 03:36:46",
                                    "site": {
                                        "id": 2,
                                        "name": "Facebook",
                                        "logo": "facebook_business.jpg",
                                        "created_at": "2019-08-27 12:09:35",
                                        "updated_at": "2019-08-27 12:09:35"
                                    }
                                }];

任何帮助，将不胜感激！

标签： jquery

解决方案

考虑以下示例。

var mySites = [{
  "id": 8,
  "user_id": 2,
  "site_id": 1,
  "site_url": "https:\/\/google.com",
  "created_at": "2019-12-19 12:56:46",
  "updated_at": "2021-07-12 03:36:15",
  "site": {
    "id": 1,
    "name": "Google My Business",
    "logo": "google_business.jpg",
    "created_at": "2019-08-27 12:09:35",
    "updated_at": "2019-08-27 12:09:35"
  }
}, {
  "id": 9,
  "user_id": 2,
  "site_id": 3,
  "site_url": "https:\/\/yelp.com",
  "created_at": "2020-02-12 10:05:29",
  "updated_at": "2021-07-12 03:36:30",
  "site": {
    "id": 3,
    "name": "Yelp",
    "logo": "yelp.png",
    "created_at": "2019-08-27 12:09:35",
    "updated_at": "2019-08-27 12:09:35"
  }
}, {
  "id": 19,
  "user_id": 2,
  "site_id": 2,
  "site_url": "https:\/\/facebook.com",
  "created_at": "2021-07-12 03:36:46",
  "updated_at": "2021-07-12 03:36:46",
  "site": {
    "id": 2,
    "name": "Facebook",
    "logo": "facebook_business.jpg",
    "created_at": "2019-08-27 12:09:35",
    "updated_at": "2019-08-27 12:09:35"
  }
}];

$(function() {
  function populateSites(data, target) {
    $.each(data, function(index, item) {
      $("<option>", {
          value: item.site_url
        })
        .data("site-index", index)
        .html(item.site.name)
        .appendTo(target);
    });
  }

  function redirectTo(url) {
    if (url == "" || url == undefined) {
      return false;
    }
    window.location.redirect(url);
  }

  $("#site").change(function() {
    redirectTo($(this).val());
  });

  populateSites(mySites, $("#sites"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Site:
<select id="sites">
  <option></option>
</select>

您不想使用硬编码的 URL 填充重定向。这就是您通过从服务器端脚本填充它所做的事情。相反，您希望在用户进行选择时填充重定向。

您可以通过几种方式做到这一点。我提供的示例value使用 URL 填充每个选项的属性。这使得它很容易收集。您还可以使用数组索引作为value然后您知道用户选择了哪个，并可以从您的数据中提取所需的详细信息。

EG 如果用户从下拉菜单中选择了第二个项目“Yelp”，您将获得数组索引，1然后您可以拉出该数据。

var results = confirm("You selected " + myData[1].site.name + ", which was most recently updated on " + myData[1].updated_at + ". Do you want  to proceed to this site?");
if(results){ redirectTo(myData[1].site_url) }

表示数组索引，1也可以是变量。

推荐阅读