Question

我正在尝试在用户点击元素时更改描述产品条件的消息。下面的代码似乎是有效的，但是当我点击元素（.conditionOption label）时，我的消息没有被更改。

我正在使用jQuery 1.7.2，因此.live();仍然有效，但我尝试将内容切换为.click()并获得相同的结果。

HTML CODE

    <div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
    <div class="productAttributeLabel">
        <label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
            <span class="required">*</span>
            <span class="name">Cosmetic Condition:</span>
            <i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
        </label>
    </div>
    <div class="productAttributeValue">
        <div class="productOptionViewRectangle conditionOption">
            <ul class="list-horizontal">
                <li class="option">
                    <label for="4a43f295a3273a1b90567090ac3fc9f3">
                        <input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
                            <span class="name">Excellent</span>
                        </input>
                    </label>
                </li>
                <li class="option">
                    <label for="f03ed6c05af7ea80dc1b75d853f43026">
                        <input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
                            <span class="name">Good</span>
                        </input>
                    </label>
                </li>
                <li class="option   selected selectedValue">
                    <label for="1598c6f69093cdf495f564397485e044">
                        <input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
                            <span class="name">Fair</span>
                        </input>
                    </label>
                </li>
            </ul>
            <div id="conditionExplanationWrapper">
                <span id="conditionExplanation">MESSAGE 1</span>
            </div>
        </div>
    </div>
    <div class="cf"></div>
</div>

使用Javascript / jQuery的

function conditionExplanation() {
  // Set vars for three conditions
  var excellentMessage = 'MESSAGE 1';
  var goodMessage = 'MESSAGE 2';
  var fairMessage = 'MESSAGE 3';

  // Assign finder class to div
  $('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');

  // Build wrapper for message
  $('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');

  // Insert message corresponding to .conditionOption .selectedValue
  $('.conditionOption label').live('click', function(){
    if ($('.conditionOption .selectedValue:contains("Excellent")')) {
        $('#conditionExplanation').html(excellentMessage);
    } else if ($('.conditionOption .selectedValue:contains("Good")')) {
        $('#conditionExplanation').html(goodMessage);
    } else if ($('.conditionOption .selectedValue:contains("Fair")')) {
        $('#conditionExplanation').html(fairMessage);
    }
  });
}

见https://jsfiddle.net/mvnxg3t4/

的小提琴

Answer 1

问题是你一遍又一遍地比较同样的价值;相反，你应该使用this，然后使用常规文本搜索：

var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
    $('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
    $('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
    $('#conditionExplanation').html(fairMessage);
}

$(document).ready(conditionExplanation);

function conditionExplanation() 
{
    // Set vars for three conditions
    var excellentMessage = 'MESSAGE 1';
    var goodMessage = 'MESSAGE 2';
    var fairMessage = 'MESSAGE 3';

    // Assign finder class to div
    $('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');

    // Build wrapper for message
    $('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');

    // Insert message corresponding to .conditionOption .selectedValue
    $('.conditionOption label').live('click', function (e) {
        var value = $(this).text();
        if (value.indexOf('Excellent') != -1) {
            $('#conditionExplanation').html(excellentMessage);
        } else if (value.indexOf('Good') != -1) {
            $('#conditionExplanation').html(goodMessage);
        } else if (value.indexOf('Fair') != -1) {
            $('#conditionExplanation').html(fairMessage);
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
    <div class="productAttributeLabel">
        <label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
            <span class="required">*</span>
            <span class="name">Cosmetic Condition:</span>
            <i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
        </label>
    </div>
    <div class="productAttributeValue">
        <div class="productOptionViewRectangle conditionOption">
            <ul class="list-horizontal">
                <li class="option">
                    <label for="4a43f295a3273a1b90567090ac3fc9f3">
                        <input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
                            <span class="name">Excellent</span>
                        </input>
                    </label>
                </li>
                <li class="option">
                    <label for="f03ed6c05af7ea80dc1b75d853f43026">
                        <input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
                            <span class="name">Good</span>
                        </input>
                    </label>
                </li>
                <li class="option   selected selectedValue">
                    <label for="1598c6f69093cdf495f564397485e044">
                        <input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
                            <span class="name">Fair</span>
                        </input>
                    </label>
                </li>
            </ul>
            <div id="conditionExplanationWrapper">
                <span id="conditionExplanation">MESSAGE 1</span>
            </div>
        </div>
    </div>
    <div class="cf"></div>
</div>

Answer 2

尝试使用点击并将其添加到您的身体上。

 $(function () {


    $('.conditionOption label').click(function () {

    });

}）;

jQuery没有看到click（）事件

2 个答案: