Question

在 jQuery 中如何从父级获取数据属性

2020-09-11

1064

jquery

这是我的 HTML:

<div class="container" data-step="a_1">
    <div class="mx-auto col-10">
        <h1 class="font-weight-light ls1">Question 1</h1>
        <div class="row">
            <div class="col-xl-6 col-sm-10 mb-5">
                <div data-next="item1">
                    <input id="radio-1" class="radio-style" type="radio" name="question1[]" value="value1" class="required">
                    <label for="radio-1" class="radio-style-1-label">Item 1</label>
                </div>
                <div data-next="item2">
                    <input id="radio-2" class="radio-style" type="radio" name="question1[]" value="value2" class="required">
                    <label for="radio-2" class="radio-style-1-label">Item 2</label>
                </div>
            </div>
        </div>
        <a href="#" class="button button-border font-weight-medium button-circle" data-action="validate-step">Next »</a>
    </div>
</div>

单击 Next » 时，我希望能够获取已选中元素的 data-next 。

这是我尝试过的:

$('a[data-action="validate-step"]').click(function(event) {
    event.preventDefault();

    item = $(this).closest('.container').data('step');

    name  = $(item).prop('checked').closest('div').data('name');
    steps = $(item).prop('checked').closest('div').data('steps');
    next  = $(item).prop('checked').closest('div').data('next');

    alert(name);
    alert(steps);
    alert(next);    
});

但是我出现了这个错误:

TypeError: undefined is not an object (evaluating '$(item).prop('checked').closest')

谢谢您的帮助。

Answer 1

将父容器保存在变量中，然后使用 :checked 导航到已选中的子复选框，然后即可到达其父级并检查其数据：

$('a[data-action="validate-step"]').click(function(event) {
    event.preventDefault();
    const container = $(this).closest('.container');
    const checkbox = container.find(':checked');
    const checkboxParent = checkbox.parent();
    console.log(checkboxParent.data('next'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-step="a_1">
    <div class="mx-auto col-10">
        <h1 class="font-weight-light ls1">Question 1</h1>
        <div class="row">
            <div class="col-xl-6 col-sm-10 mb-5">
                <div data-next="item1">
                    <input id="radio-1" class="radio-style" type="radio" name="question1[]" value="value1" class="required">
                    <label for="radio-1" class="radio-style-1-label">Item 1</label>
                </div>
                <div data-next="item2">
                    <input id="radio-2" class="radio-style" type="radio" name="question1[]" value="value2" class="required">
                    <label for="radio-2" class="radio-style-1-label">Item 2</label>
                </div>
            </div>
        </div>
        <a href="#" class="button button-border font-weight-medium button-circle" data-action="validate-step">Next »</a>
    </div>
</div>

Answer 2

这个怎么样？

$('a[data-action="validate-step"]').click(function(event) {
  var checked = $(this).prev().find('[data-next]').has(':checked').data('next');
  console.log(checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-step="a_1">
  <div class="mx-auto col-10">
    <h1 class="font-weight-light ls1">Question 1</h1>
    <div class="row">
      <div class="col-xl-6 col-sm-10 mb-5">
        <div data-next="item1">
          <input id="radio-1" class="radio-style" type="radio" name="question1[]" value="value1" class="required">
          <label for="radio-1" class="radio-style-1-label">Item 1</label>
        </div>
        <div data-next="item2">
          <input id="radio-2" class="radio-style" type="radio" name="question1[]" value="value2" class="required">
          <label for="radio-2" class="radio-style-1-label">Item 2</label>
        </div>
      </div>
    </div>
    <a href="#" class="button button-border font-weight-medium button-circle" data-action="validate-step">Next »</a>
  </div>
</div>