Question

我对java-script很新。很抱歉，如果这是一个愚蠢的问题。

我有一些手风琴元素的JavaScript函数，它的功能没有任何问题。但是当我点击任何手风琴元素时，我想要获得该手风琴的id属性（正如您在点击功能事件中看到的那样），然后将此id放在第二个contentTypeValue选择器之前功能

showHideUniMul功能不起作用，我认为这是由itemId变量引起的。如何使用点击事件功能之外的itemId，直到使用showHideUniMul函数？

当我没有使用showHideUniMul变量且itemId返回itemId时，

信息 id功能正常运行没有任何问题}属性成功。

$('ul#menu-to-edit li a.item-edit').click(function() {
    var itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
    var contentTypeValue = $(itemId + ' .field-content-type input:checked').val();
    if (contentTypeValue === 'uniform') {
       //some codes here
    } else if (contentTypeValue === 'multiple') {
       //some codes here
    } else {
       //some codes here
    }
};

showHideUniMul();
contentType.on('change', showHideUniMul);

修改

这是我的Html结构

    <ul id="menu-to-edit">
    <li id="1">
        <div>
            <div>
                <span>
                    <a class="item-edit">Click Me and then check radio boxes</a>
                </span>
            </div>
        </div>
        <div>
            <p class="field-content-type">
                <input type="radio" name="uniform[1]" value="uniform" />
                <input type="radio" name="multiple[1]" value="multiple" />
            </p>
        </div>
    </li>
    <li id="2">
        <div>
            <div>
                <span>
                    <a class="item-edit">Click Me and then check radio boxes</a>
                </span>
            </div>
        </div>
        <div>
            <p class="field-content-type">
                <input type="radio" name="uniform[2]" value="uniform" />
                <input type="radio" name="multiple[2]" value="multiple" />
            </p>
        </div>
    </li>
</ul>

Answer 1

注意：在函数执行完成后，函数内部创建的变量（ 由于本地范围 ）消失了 - 变量，所以你不能直接将它们用于其他功能。

您需要在此处使用 全局变量 范围/概念： -

var itemId; // define global

$('ul#menu-to-edit li a.item-edit').click(function() {
    itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
    var contentTypeValue = $(itemId + ' .field-content-type input:checked').val();
    if (contentTypeValue === 'uniform') {
       //some codes here
    } else if (contentTypeValue === 'multiple') {
       //some codes here
    } else {
       //some codes here
    }
};

showHideUniMul();
contentType.on('change', showHideUniMul);

示例示例： -

＆＃13;

var itemId; // define global

$('ul#menu-to-edit li a.item-edit').click(function() {
  itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
  var contentTypeValue = $('.field-content-type input:checked').val();
  console.log(itemId);
 
};
$('input[type=radio]').on('change',function(){
  showHideUniMul();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-to-edit">
  <li id="1">
    <div>
      <div>
      <span>
        <a class="item-edit">Click Me and then check radio boxes</a>
      </span>
      </div>
    </div>
    <div>
      <p class="field-content-type">
        <input type="radio" name="uniform[1]" value="uniform" />
        <input type="radio" name="multiple[1]" value="multiple" />
      </p>
    </div>
  </li>
  <li id="2">
    <div>
      <div>
        <span>
          <a class="item-edit">Click Me and then check radio boxes</a>
        </span>
      </div>
    </div>
    <div>
      <p class="field-content-type">
        <input type="radio" name="uniform[2]" value="uniform" />
        <input type="radio" name="multiple[2]" value="multiple" />
      </p>
    </div>
  </li>
</ul>

＆＃13;

Answer 2

你的问题是因为你的范围 - 在showHideUniMul（）函数中没有定义itemId。将您的代码更改为以下内容 -

var itemId;

$('ul#menu-to-edit li a.item-edit').click(function() {
    itemId = $(this).parent().parent().parent().parent().attr('id');
});

var showHideUniMul = function() {
    var contentTypeValue = $('#' + itemId + ' .field-content-type input:checked').val();
    if (contentTypeValue === 'uniform') {
       //some codes here
    } else if (contentTypeValue === 'multiple') {
       //some codes here
    } else {
       //some codes here
    }
};

showHideUniMul();
contentType.on('change', showHideUniMul);

这使得itemId成为全局的，可以从任何函数访问。您还需要添加＆＃39;＃＆＃39; + itemId为contentTypeValue的值

JavaScript使用函数事件之外的变量

2 个答案: