This is my HTML:
<div id="RouterTemplates">
<div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="4">
<span class="onoffswitch">
<input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="4" checked="checked">
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
<div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="5">
<span class="onoffswitch">
<input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="5" >
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
</div>
I'm try to get 2 things, the router_id for the section clicked and the value for the checkbox I clicked on. This is what I've tried thus far:
$('.routerservicestatusswitch').on('click', function (e)
{
var id = $(this).parent('router-template').data('router-id');
var id2 = $(this).siblings('.router-template').data('router-id');
var id3 = $(this).closest('.router-template').data('router-id');
var id4 = $(this).closest('.widget-toolbar').find('.onoffswitch-checkbox').data('router_id');
var id5 = $(this).find(':checkbox').attr('router_id');
var id6 = $(this).find(':checkbox').val();
if ($('#routeronoffswitch').is(':checked') == true)
{
SetRouter(true);
}
else
{
SetRouter(false);
}
});
I've tried different event handlers and they all return the router_id of the first section and never the id for the one I click. Can someone tell me how to get the correct data?
You have duplicated IDs: this is not possible. So you must change them to class or add a suffix in order to make them unique.
Second point: you have:
<div data-router-id="
a "data-router-id" and two: "router_id="" attribute.
You may access them using jQuery#closest and jQuery#data or jQuery#attr. For the data attributes you can use data but for the others you need to use attr:
Moreover, try to use the change event for checkboxes instead of click.
The snippet:
function SetRouter(arg1) {
console.log('SetRouter: ' + arg1)
}
$('.routerservicestatusswitch').on('change', function (e) {
var id1 = $(this).closest('.router-template').data('router-id');
var id2 = $(this).closest('.widget-toolbar').attr('router_id');
var id3 = $(this).attr('router_id');
var id4 = $(this).val();
console.log('id1: ' + id1 + ' id2: ' + id2 + ' id3: ' + id3);
if ($(this).is(':checked')) {
SetRouter(true);
} else {
SetRouter(false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="RouterTemplates">
<div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template"
data-widget-colorbutton="false" data-widget-custombutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar1" router_id="4">
<span class="onoffswitch">
<input type="checkbox" id="routeronoffswitch1" class="onoffswitch-checkbox routerservicestatusswitch"
router_id="4" checked="checked">
<label class="onoffswitch-label" for="routeronoffswitch1">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
<div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
<div class="widget-toolbar" class="routeronoffswitchtoobar" router_id="5">
<span class="onoffswitch">
<input type="checkbox" id="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch"
router_id="5" >
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
</div>
Related
I am trying to disable input when a radio button is changed, but it does not change.
The one in the first of the ready function $(".key").prop('disabled', true); works fine.
<div class="card-body">
#*Title*#
<div class="form-group">
<label>Title: </label>
<div class="row">
<div class="col-lg-6">
<label class="option option-plain">
<span class="option-control">
<span class="radio">
<input type="radio" name="title_option" value="0" checked="checked" />
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title">
Key Pair
</span>
</span>
<span class="option-body">
Description
</span>
</span>
</label>
</div>
<div class="col-lg-6">
<label class="option option option-plain">
<span class="option-control">
<span class="radio">
<input type="radio" name="title_option" value="1" />
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title">
Key Pair
</span>
</span>
<span class="option-body">
Description
</span>
</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Signing Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Encryption Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".key").prop('disabled', true);
$("input[type=radio][name=title_option]").change(function () {
console.log($(this).val());
if ($(this).val() == 0) {
$(".key").prop('disabled', true);
} else {
$(".key").prop('disabled', false);
}
});
});
</script>
Your code is working fine once I included the jQuery. Please see the result.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<body>
<div class="card-body">
#*Title*#
<div class="form-group">
<label>Title: </label>
<div class="row">
<div class="col-lg-6">
<label class="option option-plain">
<span class="option-control">
<span class="radio">
<input
type="radio"
name="title_option"
value="0"
checked="checked"
/>
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title"> Key Pair </span>
</span>
<span class="option-body"> Description </span>
</span>
</label>
</div>
<div class="col-lg-6">
<label class="option option option-plain">
<span class="option-control">
<span class="radio">
<input type="radio" name="title_option" value="1" />
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title"> Key Pair </span>
</span>
<span class="option-body"> Description </span>
</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Signing Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Encryption Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".key").prop("disabled", true);
$("input[type=radio][name=title_option]").change(function () {
//console.log($(this).val());
if ($(this).val() == 0) {
$(".key").prop("disabled", true);
} else {
$(".key").prop("disabled", false);
}
});
});
</script>
</div>
</body>
</head>
</html>
I have a problem with the code. I cannot change the font color of a specific value. For example, I would need to change the font color for DHL delivery only. I type the commands and either all delivery names change or none. Please help.
I have this html on my website
#cart-options .delivery-container .delivery .name label,
#cart-options .payment-container .delivery .name label {
color: #fa6161 !important;
font-weight: bold !important;
}
<div id="cart-options">
<div class="delivery-container">
<div class="deliverycountry">
<span colspan="3" class="desc">
<em>Choose country:</em>
</span>
<span colspan="3" class="select">
<select name="shipping_country">
<option value="12">Austria</option>
</select>
</span>
<span class="actions"></span>
</div>
<div >
<h5>Dostawa:</h5>
<div data-engine="inpost" class="delivery selected first">
<span class="name">
<span class="radio-wrap">
<input type="radio" name="shipping_id" id="shipping_20" value="20" checked="checked" />
<label for="shipping_20"></label>
</span>
<label for="shipping_20">InPost</label>
<span class="description">
(text)
</span>
</span>
<span class="value">
13,50 zł
</span>
</div>
<div class="delivery">
<span class="name">
<span class="radio-wrap">
<input type="radio" name="shipping_id" id="shipping_15" value="15" />
<label for="shipping_15"></label>
</span>
<label for="shipping_15">DHL</label>
<span class="description">
(text)
</span>
</span>
<span class="value">
8,50 zł
</span>
</div>
</div>
<div class="payment-container">
<h5>
Payment method:
</h5>
<div class="payment selected first">
<span class="name">
<span class="radio-wrap">
<input type="radio" name="payment_id" id="payment_15" value="15" checked="checked" />
<label for="payment_15"></label>
</span>
<label for="payment_15">
Paypal
</label>
<span class="description">
(description)
<a id="online-payment" data-op-payment-id="15" class="js__online-payment">(wybierz Twój bank)</a>
<input type="hidden" name="online_payment_gateway_id" id="online-payment-gateway-id" value="">
<input type="hidden" id="online-payment-methods" value="code">
</span>
<span class="additional_cost_percent"></span>
</span>
<span class="value"></span>
</div>
<div class="payment">
<span class="name">
<span class="radio-wrap">
<input type="radio" name="payment_id" id="payment_4" value="4" />
<label for="payment_4"></label>
</span>
<label for="payment_4">
cash
</label>
<span class="description">
(cash)
</span>
<span class="additional_cost_percent"></span>
</span>
<span class="value"></span>
</div>
The only code that came out to me is this (but it changes the colors of all deliveries).
You could either style it inline like this <label style="color:blue">DLH</label>
Or you could make a seperate css class for this label
I'm trying to pull in the title from another element and post that value inside of the span with the class .selected-swatch and change depending on which option swatch is selected but I keep getting the error:
"TypeError: document.querySelector(...) is null"
JS:
<script>
var swatches = document.getElementsByClassName('form-option-swatch');
for (var i=0; i < swatches.length; i++) {
swatches[i].onclick = function(){
console.log('yep');
document.querySelector('.form-option-variant[title="' + this.title + '"]').click();
document.querySelector('.selected-swatch').innerHTML = this.title;
}
};
</script>
HTML:
<div class="productView-optionsGrid">
<div data-product-option-change="" style="">
<div class="form-field" data-product-attribute="swatch">
<label class="form-label form-label--alternate form-label--inlineSmall">
<strong>Design:</strong>
<span class="selected-swatch" data-option-value=""></span>
</label>
<input class="form-radio" type="radio" name="attribute[115]" value="100" id="attribute_swatch_115_100" required="" data-state="false">
<label class="form-option form-option-swatch" for="attribute_swatch_115_100" data-product-attribute-value="100">
<span class="form-option-variant form-option-variant--pattern" title="Champion" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/64x64/attribute_value_images/100.preview.jpg?t=1578332252');"></span>
<span class="form-option-expanded">
<span class="form-option-image" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/original/attribute_value_images/100.preview.jpg?t=1578332252');"></span>
</span>
</label>
<input class="form-radio" type="radio" name="attribute[115]" value="1604" id="attribute_swatch_115_1604" required="" data-state="false">
<label class="form-option form-option-swatch" for="attribute_swatch_115_1604" data-product-attribute-value="1604">
<span class="form-option-variant form-option-variant--pattern" title="Drive" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/64x64/attribute_value_images/1604.preview.jpg?t=1578332252');"></span>
<span class="form-option-expanded">
<span class="form-option-image" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/original/attribute_value_images/1604.preview.jpg?t=1578332252');"></span>
</span>
</label>
</div>
</div>
</div>
Hello Friends I have span with class .amount how can i get price from this span i have tried but i am not able to point out the exact location
Html
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" type="radio">
<label for="tmcp_choice_14_2_39">
<img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span>
</label>
<span class="price tc-price hidden">
<span class="amount">500</span>
</span>
</li>
Javascript
$('.fabric-layer-pattern').click(function() {
var spanEl1 = $(this).parent('li.radio').find('span.amount');
var priceee = spanEl1.text(); //Get text
console.log(price);
// this alert is coming two times empty after that price will come
alert(priceee);
});
Updated Html Code
<ul>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_1_38"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_2_39"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
</ul>
please suggest something...
Use parent() and find() to have specific element from multiple elements.
var spanEl = $(this).parent('li').find('span.amount');
var price = spanEl.text(); //Get text
console.log(price);
/*$('.fabric-layer-pattern').click(function() {
var spanEl = $(this).parent('li').find('span.amount');
var price = spanEl.text(); //Get text
console.log(price);
});*/
$('.fabric-layer-pattern').click(function() {
var spanEl1 = $(this).parent('li.radio').find('span.amount');
var priceee = spanEl1.text(); //Get text
console.log(priceee);
// this alert is coming two times empty after that price will come
alert(priceee);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_1_38"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">600</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_2_39"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">700</span> </span>
</li>
</ul>
Try using siblings():
$('.fabric-layer-pattern').click(function() {
var spanEl = $(this).siblings().filter("span.amount");
var price = spanEl.text(); //Get text
});
$(this) inside the event scope is the radio input itself and span.amount is not inside it.
Demo
UPDATE
I have tried but in third alert i am getting price before that empty alert is coming
This can have different meanings. With only this comment I may figure out the price value is changed outside and you are interested in that event.
If it is so, you may refer to MutationObserver. Moreover, instead of click event you may consider to use the change event.
According to this considerations I updated the snippet.
You may use closest:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
The snippet:
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length > 0) {
$('.fabric-layer-pattern').trigger('click');
}
});
});
observer.observe($('li.radio span.amount').get(0), { attributes: true, childList: true });
// later, you can stop observing
// observer.disconnect();
$('#myBtn').on('click', function(e) {
$('li.radio span.amount').text(Date.now());
});
$('.fabric-layer-pattern').on('click', function() {
var spanEl = $(this).closest('li.radio').find('span.amount');
var price = spanEl.text(); //Get text
console.log('span.amount is: ' + price);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="myBtn">Change price</button>
<ul>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_1_38"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_2_39"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
</ul>
I guess this will do:
// Just to be specific
$(".fabric-layer-pattern + span.price > span.amount").text();
Try this code
$('.fabric-layer-pattern').click(function() {
var price = $('span.amount').text();
});
I'm attempting to change a message describing a product's condition when the user clicks on an element. The code below seems to be valid, however when I click on the element (.conditionOption label), my message is not being changed.
I'm using jQuery 1.7.2, so .live(); is still valid, I have however attempted to switch things to .click() with the same results.
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);
}
});
}
See Fiddle at https://jsfiddle.net/mvnxg3t4/
The problem is that you're comparing the same value over and over; instead you should make use of this and then use regular text search:
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>
Try using on click and add it in on your on load of body.
$(function () {
$('.conditionOption label').click(function () {
});
});