Question

我有3个步骤的步骤形式。我希望<li>中stepinstallment的索引在<label>内选中以进行检查：

如果选择了第一步，它将更改circle类的背景颜色。
如果在没有第一步的情况下选择了第二步和第三步，则会显示错误消息。

我在SO上尝试了很多方法并自己写，但它不起作用。

这是我的代码

<ul class="clearfix">
    <li>
        <div class="step-one circle">
            <p>Step 1</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 2</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 3</p>
        </div>
    </li>
</ul>

<div class="stepinstallment">
    <ul>
        <li id="step-one" class="step">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-two" class="step">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-three" class="step">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>
    </ul>
</div>

JS

var sCircle = $('.steps ul li');

    $('.step label').on('click', function(){
        var $this = $(this),
            sCircleIndex = parseInt(sCircle.index()),
            sCircleChild = sCircle.children('div'),
            currParent = $this.parents('ul').index();

        console.log(currParent);
    });

以上JS代码始终返回0。希望有人能把我弄清楚这个案子。提前谢谢。

Answer 1

尝试使用.closest()

$(".stepinstallment label").on("click", function() {
    console.log($(this).closest("li").index())
});

    $('.stepinstallment label').on('click', function(){
        console.log($(this).closest("li").index())
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="clearfix">
    <li>
        <div class="step-one circle">
            <p>Step 1</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 2</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 3</p>
        </div>
    </li>
</ul>

<div class="stepinstallment">
    <ul>
        <li id="step-one">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-two">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-three">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>
    </ul>
</div>

Answer 2

我希望这个例子可以帮助你！

＆＃13;

$("ul#wizard li").click(function () {
  var index = $("ul#wizard li").index(this);
  if(index!=0)
      alert("error ")
  else
       alert("index is: " + index)
});

＆＃13;

<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
    <p>Some random tag</p>
</ul>

＆＃13;

Answer 3

$('.step label')不会返回任何元素，因为没有匹配css选择器的html

Answer 4

我在你的HTML中看不到.steps和.step类。

使用你的html，我想这段代码可以正常工作

$('.stepinstallment').on('click', 'label', function (e) {
    var $this = $(this);
    var li = $this.parents('li');
    console.log(li.index());
});

代码的步骤：

获取标签元素
让li元素包含标签
获取索引

Answer 5

标签上没有点击...它是空的。你可以绑定点击复选框，找到li的索引并在它的基础上为你的圈子中的LI的相同索引着色UL：

var sCircle = $('.steps ul li');

    $('input[type=radio]').on('click', function(){
       var liIndex=$(this).parents('li').index();
        if(liIndex>0){
            alert('error')
        }
        else{
            $('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
        }
    });

JSFIDDLE

Answer 6

＆＃13;

$(document).ready(function(){
var sCircle = $('.steps ul li');

$('.step label').on('click', function () {
    var currentLi = $(this).parents('li')[0];
    currentLiIndex = -1;
    sCircle.each(function (index) {
        if (sCircle[index] == currentLi) {
           currentLiIndex = index;
        }
    });
    
    console.log(currentLiIndex);

});
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="clearfix">
    <li>
        <div class="step-one circle">
            <p>Step 1</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 2</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 3</p>
        </div>
    </li>
</ul>
<div class="stepinstallment steps">
    <ul>
        <li id="step-one">
             <h2>Choose your document</h2>

            <div class="step step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>

                </label>
            </div>
        </li>
        <li id="step-two">
             <h2>Choose your document</h2>

            <div class=" step step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>

                </label>
            </div>
        </li>
        <li id="step-three">
             <h2>Choose your document</h2>

            <div class="step step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>

                </label>
            </div>
        </li>
    </ul>
</div>

＆＃13;

Answer 7

这是你需要做的。

$('.step-content label').on('click', function(){
  var clickedId = $(this).parents('li').index();
  if(clickedId == 0) {
    $('.circle').css('background-color','yellow');
  } else {
    alert('error');
  }
});

jsfiddle中的工作示例https://jsfiddle.net/1uxus551/

单击里面的元素时如何获取<li>元素的索引？

7 个答案: