Question

我有以下情况。为了向访问者提供特定URL，用户必须在总共三个列表中单击3个选项。他/她点击的对象包含数据属性。这三个属性构成一个URL：

产品
主题
设备

HTML code：

<div class="choice-list">
    <ul>
        <li><span data-href="productone"></span></li>
        <li><span data-href="producttwo"></span></li>
        <li><span data-href="productthree"></span></li>
    </ul>
</div>

<div class="choice-list">
    <ul>
        <li><span data-href="topicone"></span></li>
        <li><span data-href="topictwo"></span></li>
        <li><span data-href="topicthree"></span></li>
    </ul>
</div>

<div class="choice-list">
    <ul>
        <li><span data-href="deviceone"></span></li>
        <li><span data-href="devicetwo"></span></li>
        <li><span data-href="devicethree"></span></li>
    </ul>
</div>

所以最终的网址可能是： productone-topictwo-devicethree 。我设法为此制作了一个相当简单的脚本，但我发现很难记住每个字符串的位置。因为如果用户生成URL productone-topictwo-devicethree 并且他以 topictwo 需要 topicthree 的方式编辑它，那么我当前的脚本只会附加新值。

$j(".product-support-steps .choice-list").each(function() {
    var $currentList = $j(this);
    $currentList.each(function() {
        $currentList.find('li').click(function() {

            //Get URL params ...
            var $urlParam = $j(this).data('href');
            $j('.finalurl').val(function(_, val) {
                if (val.match($urlParam)) {
                    return val.replace($urlParam, '');
                }
                return val + $urlParam;
            });

            var $finalUrl = $j(".finalurl").val();
            console.log($finalUrl);
        });

    });
});

如果有人可以帮我最终确定这个脚本，那么可以添加和删除3个列表值，并记住他们的位置，你在做神的工作！

Answer 1

您可以尝试这些代码。您只需要对现有代码进行细微更改，一切都像魅力一样。

HTML

<div class="choice-list">
<ul>
<li><span data-index='0' data-href="productone">productone</span></li>
<li><span data-index='0' data-href="producttwo">producttwo</span></li>
<li><span data-index='0' data-href="productthree">productthree</span></li>
</ul>
</div>

<div class="choice-list">
<ul>
<li><span data-index='1' data-href="topicone">topicone</span></li>
<li><span data-index='1' data-href="topictwo">topictwo</span></li>
<li><span data-index='1' data-href="topicthree">topicthree</span></li>
</ul>
</div>

<div class="choice-list">
<ul>
<li><span data-index='2' data-href="deviceone">deviceone</span></li>
<li><span data-index='2' data-href="devicetwo">devicetwo</span></li>
<li><span data-index='2' data-href="devicethree">devicethree</span></li>
</ul>
</div>

关于此HTML，下面是JavaScript代码：

  var urlArray = ['','',''];
  $('.choice-list').find('li').click(function() {
            //gets the URL text
            var href = $(this).find('span').attr('data-href'),
                //determines the index on the array where the URL text will 
                //be inserted
                index = $(this).find('span').attr('data-index');
                //insert the URL text in specified index of array
                urlArray[index] = href;
                //convert the array to the specified URL format with hyphen
                var url = urlArray.toString().replace(/,/g,'-');
                console.log(url);
 });

这也是一个有效的JSFIDDLE

Answer 2

你不必去那复杂的事情。只需在父项中选择一个数据属性，并在属性中选择存储的任何选项并在最后加入值并发送。更多的验证可以放在宫殿我只是做了基本的想法。

＆＃13;

$(".choice-list li span").click(function() {
          var val = $(this).data('href');
          $(this).closest('.choice-list').attr('data-selected',val) 
});

$("#getfinal").click(function(){
  var url = [];
   $(".choice-list").each(function(){
      if($(this).data('selected'))
        url.push($(this).data('selected'))
   });
   if(url.length >= 3)
   {
      alert(url.join('-'));
    }else{
     alert("select all three options");
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-selected="" class="choice-list">
  <p>click to choose</p>
    <ul>
    <li><span data-href="productone">a</span></li>
    <li><span data-href="producttwo">b</span></li>
    <li><span data-href="productthree">c</span></li>
    </ul>
    </div>
    
    <div data-selected="" class="choice-list">
    <p>click to choose</p>
    <ul>
    <li><span data-href="topicone">a</span></li>
    <li><span data-href="topictwo">b</span></li>
    <li><span data-href="topicthree">c</span></li>
    </ul>
    </div>
    
    <div data-selected="" class="choice-list">
    <p>click to choose</p>
    <ul>
    <li><span data-href="deviceone">a</span></li>
    <li><span data-href="devicetwo">b</span></li>
    <li><span data-href="devicethree">c</span></li>
    </ul>
    </div>

<button id="getfinal">FINAL</button>

＆＃13;

Answer 3

您可以创建对象url，并在点击product元素时指定属性topic，device和li。我在每个data-choice上添加了ul属性，对应每个选项。

单击元素会在对象url中添加该属性，重新单击同一元素会从对象中删除该属性。

然后当网址完成时（做出3个选项），它会显示完整的网址。

请尝试以下代码段：

var url = {};

$(document).ready(function () {
    $(".choice-list").on("click", "li", function () {
        var prop = $(this).closest("ul").data("choice");
        var value = $(this).find("span").data("href");

        if (url.hasOwnProperty(prop) && url[prop] == value) {
            delete url[prop];
        } else {
            url[prop] = value;
        }

        console.log(url);

        if (url.hasOwnProperty("product") && url.hasOwnProperty("topic") && url.hasOwnProperty("device")) {
            console.log("URL complete: " + constructUrl(url));
        }
    });
});

function constructUrl(url) {
    return url["product"] + "-" + url["topic"] + "-" + url["device"];
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choice-list">
    <ul data-choice="product">
        <li><span data-href="productone">Product 1</span></li>
        <li><span data-href="producttwo">Product 2</span></li>
        <li><span data-href="productthree">Product 3</span></li>
    </ul>
</div>

<div class="choice-list">
    <ul data-choice="topic">
        <li><span data-href="topicone">Topic 1</span></li>
        <li><span data-href="topictwo">Topic 2</span></li>
        <li><span data-href="topicthree">Topic 3</span></li>
    </ul>
</div>

<div class="choice-list">
    <ul data-choice="device">
        <li><span data-href="deviceone">Device 1</span></li>
        <li><span data-href="devicetwo">Device 2</span></li>
        <li><span data-href="devicethree">Device 3</span></li>
    </ul>
</div>
<br/><br/><br/><br/><br/><br/>

如何在保持位置

3 个答案: