javascript - jQuery 获取文本不是选中单选选项的值不起作用

Question

我有一个 JavaScript/jQuery 练习，您选择了一个拥有一家房地产公司的单选选项。选择后，列出的属性将返回到表格中。这部分代码工作正常。但是，我想说明用户在标题中选择的公司名称，这意味着我需要单选选项的文本。使用我现在拥有的代码，它返回所有公司的名称，而不仅仅是用户选择的公司的名称。我不知道为什么，因为我使用的 .text() 代码来自在线资源。有人可以帮助我而不更改我的任何其他代码吗？

 <script>
    var realEstateFirms = {
    clark: {
    PropertyOne: "123 Pine Road Chester, PA 19013", 
    PropertyTwo: "407 Sunnyside Lane Philaelphia, PA 19013",
    PropertyThree: "400 Rothwell Terrace Chester, PA 19013",
    PropertyFour: "724 Tilghman Street Chester, PA 19013"
    },

    pinkChic: {
    PropertyOne: "201 Crestview Road Camden, NJ 08030",
    PropertyTwo: "1774 Layes Street Camden, NJ 08030",
    PropertyThree: "841 Crystal Lane Cherry Hill, NJ 08003",
    PropertyFour: "537 Foxhill Street Camden, NJ 08105"
    },

    jay: {
    PropertyOne: "2478 Brown Street Baltimore, MD 21210",
    PropertyTwo: "905 Price Boulevard Mitchellville, MD 20720",
    PropertyThree: "817 Cherry Lane Mitchellville, MD 20720",
    PropertyFour: "427 Central Avenue Baltimore, MD 21224"
    },

    ocean: {
    PropertyOne: "1402 Peachtree Road Atlanta, GA 30308",
    PropertyTwo: "267 Rigel Road Atlanta, GA 30332",
    PropertyThree: "311 Appletree Hill Road Atlanta, GA 30305",
    PropertyFour: "4822 Cascade Street Atlanta, GA 30331"
    },

    blackwell: {
    PropertyOne: "1601 Indiana Avenue Chicago, IL 60614",
    PropertyTwo: "775 Washington Boulevard Chicago, IL 60612",
    PropertyThree: "431 Dearborn Street Chicago, IL 60405",
    PropertyFour: "8822 Keeler Avenue Chicago, IL 60620"
    },
    }; // line closes array object realEstateFirms

    function selectRealEstate() {
    var selectedRadioOption = $("input[type='radio']:checked").val();
    console.log(selectedRadioOption);
    var firmSelectedName = $('label[for="realEstate-' + 
    selectedRadioOption + '"]').text();
    console.log(firmSelectedName);
    event.preventDefault();
    displayRealEstateInfo(realEstateFirms[selectedRadioOption], 
    firmSelectedName);
    console.log(realEstateFirms[selectedRadioOption]);
    }

    function displayRealEstateInfo(realEstateInfoList, firmTitle) {
    var tbl = "";
    tbl += '<table class="table table-hover">';
    tbl += '<tbody>';
    tbl += '<th>Real Estate Company:' + firmTitle + '</th>';
    tbl += '<tr>';
    tbl += '<th>Properties Listed</th>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyOne"] + '</div> 
    </td>'; 
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyTwo"] + '</div> 
    </td>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyThree"] + 
    '</div></td>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyFour"] + '</div> 
    </td>';
    tbl += '</tr>';
    tbl += '</tr>';
    tbl += '</tbody>';
    tbl += '</table>';
    $(document).find("#resultsTable").html(tbl);
    }
</script>

<p class="reList">Select One:</p>

<form action="javascript-exercise-13.html" method="post">
    <label for="realEstate-clark">
    <input type="radio" name="realEstateName" value="clark"> Clark Real Estate</label>
    <br/>
    <label for="realEstate-pinkChic">
    <input type="radio" name="realEstateName" value="pinkChic"> Pink Chic Realty<label> 
    <br/>
    <label for="realEstate-jay">
    <input type="radio" name="realEstateName" value="jay"> Jay and Sons Realty<label>
    <br/>
    <label for="realEstate-ocean">
    <input type="radio" name="realEstateName" value="ocean"> Ocean Real Estate Firm<label> 
    <br/>
    <label for="realEstate-blackwell">
    <input type="radio" name="realEstateName" value="blackwell"> Blackwell Realty<label> 
    <br/>
    <br/>
    <button class="realEstate" onclick="selectRealEstate()">Submit</button>
</form>
<div id="resultsTable"></div>

Answer 1

您的 html 无效，html 中没有结束标签标记。更新您的 html

<p class="reList">Select One:</p>
<form action="javascript-exercise-13.html" method="post">
    <label for="realEstate-clark">
        <input type="radio"
               name="realEstateName" value="clark"> Clark Real Estate
    </label><br>
    <label for="realEstate-pinkChic">
        <input type="radio"
               name="realEstateName" value="pinkChic"> Pink Chic Realty<label>
            <br>
            <label for="realEstate-jay">
                <input type="radio"
                       name="realEstateName" value="jay"> Jay and Sons Realty
            </label>
            <br>
            <label for="realEstate-ocean">
                <input type="radio"
                       name="realEstateName" value="ocean"> Ocean Real Estate Firm
            </label>
            <br>
            <label for="realEstate-blackwell">
                <input type="radio"
                       name="realEstateName" value="blackwell"> Blackwell Realty
            </label>
            <br>
            <br />
            <button class="realEstate"
                    onclick="selectRealEstate()">
                Submit
            </button>
</form>
<div id="resultsTable"></div>

要获取选定的单选按钮文本，请使用

   var selText=$("input[type='radio']:checked").closest("label").text().trim();