如何修复此 JS 到 jQuery 的转换?(回复:复选框和下拉选项选择)

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对象，它没有自己的checked属性。但是，您可以使用 jQuery 的 .prop() 方法访问所选元素的 DOM 属性：

$checkbox.prop('checked')

或者你可以直接访问第一个 DOM 元素的属性：

$checkbox[0].checked

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

$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" ) )

编辑

我可能会使用三元运算符来定义值：

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>