javascript - 如何修复此 JS 到 jQuery 的转换？ (关于 : checkbox and dropdown option selection)

Question

为了练习，我正在使用有效的 JavaScript 代码并将我能转换的代码转换为 jQuery。我浏览了 StackOverflow 和 jQuery 文档，但没有找到我需要的东西。这是我的原始/工作 JS 片段:

    if (checkbox.checked) {
        let prefixmenu = document.getElementById('prefix_menu');
        let prefix = prefixmenu.options[prefixmenu.selectedIndex].text;
        para.textContent = prefix + " " + output;
    } else {
        para.textContent = output;
    }

在不使用其余代码让您负担过重的情况下，目标是获取两个表单输入和一个可选前缀(如果选中复选框，则从下拉菜单中选择)，并在 '点击诱饵标题生成器。”

我搜索了这个站点和 jQuery 文档，发现了一些我认为可能有用但没有用的东西。我试过了，但没有打印出来:

if $("#checkbox :checked")

根据我的研究，我认为这个解决方案可行:

    if ($checkbox.checked) {
        let $prefix = $("#prefixmenu option:selected").text();
        $para.text($prefix + " " + output);
    } else {
        $para.text(output);
    }
})

从那里，我得到了带有要打印的表单输入的预制文本，但没有前缀。我不确定我错过了什么。

            <fieldset>
                <legend>Generator inputs</legend>
                <input type="checkbox" id="checkbox" value="prefix-select" name="optional_prefix">
                <label for="prefix">Select to include a prefix</label><br>
                <label for="prefix_menu">Prefix Selection:</label>
                <select id="prefix_menu">
                    <option value="1">BOOM!</option>
                    <option value="2">WOW!</option>
                    <option value="3">EPIC!</option>
                </select>
                <label for="yourname">Your name</label>
                <input type="text" id="yourname">
                <label for="othername">Another person's name</label>
                <input type="text" id="othername">
                <button type="button" id="genButton">Generate!</button>
            </fieldset>

Answer 1

一个问题是您选择了 $("#prefixmenu")，但该元素的 ID 是“prefix_menu”(带下划线)。使用 $("#prefix_menu") 访问该元素。

此外，checked是 DOM 元素的属性。 $('#checkbox') 是一个 jQuery object ，它自己没有 checked 属性。但是，您可以使用 jQuery 的 .prop() 访问所选元素的 DOM 属性。方法:

$checkbox.prop('checked')

或者您可以访问 first DOM element 的属性直接:

$checkbox[0].checked

或者您可以针对 :checked 进行测试使用 jQuery 的 CSS 伪类 is()方法:

$checkbox.is(':checked')

这是一个工作演示:

let $checkbox = $('#checkbox');
let $prefixMenu = $("#prefix_menu");
let $genButton = $("#genButton");

$genButton.on('click', function() {
  let output = 'output';
  if ($checkbox.is(':checked')) {
    let prefix = $("option:selected", $prefixMenu).text();
    output = prefix + " " + output;
  }
  console.log(output);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Generator inputs</legend>
  <input type="checkbox" id="checkbox" value="prefix-select" name="optional_prefix">
  <label for="prefix">Select to include a prefix</label><br>
  <label for="prefix_menu">Prefix Selection:</label>
  <select id="prefix_menu">
    <option value="1">BOOM!</option>
    <option value="2">WOW!</option>
    <option value="3">EPIC!</option>
  </select>
  <label for="yourname">Your name</label>
  <input type="text" id="yourname">
  <label for="othername">Another person's name</label>
  <input type="text" id="othername">
  <button type="button" id="genButton">Generate!</button>
</fieldset>

这些例子来自 .prop()进一步帮助形象化这些概念:

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

编辑

我可能会使用 ternary operators定义值:

let $checkbox = $('#checkbox');
let $prefixMenu = $("#prefix_menu");
let $genButton = $("#genButton");
let output = 'Output';

$genButton.on('click', function() {

  let prefix = $checkbox.is(':checked')
    ? $("option:selected", $prefixMenu).text()
    : false;

  let headline = prefix
    ? prefix + " " + output
    : output;

  console.log(headline);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Generator inputs</legend>
  <input type="checkbox" id="checkbox" value="prefix-select" name="optional_prefix">
  <label for="prefix">Select to include a prefix</label><br>
  <label for="prefix_menu">Prefix Selection:</label>
  <select id="prefix_menu">
    <option value="1">BOOM!</option>
    <option value="2">WOW!</option>
    <option value="3">EPIC!</option>
  </select>
  <label for="yourname">Your name</label>
  <input type="text" id="yourname">
  <label for="othername">Another person's name</label>
  <input type="text" id="othername">
  <button type="button" id="genButton">Generate!</button>
</fieldset>