Question

I want to use a if statement to open different modals. Unfortunately, it do not work. It always open the '#flowSettingsDomain'. What´s going wrong? Thank you for your tips.

HTML

<ol class="targetjQEdit ui-sortable flowControllers">
    <li class="f1">
        <span class="step">Language Flow</span>
        <a href="#" id="lF" class="dismiss">
            <i class="glyphicon glyphicon-remove-circle"></i>
        </a>
        <a href="#" onclick="fSetting(this); return false;" class="flowSettings">
            <i class="glyphicon glyphicon-cog"></i>
        </a>
        <span class="badge badgeFilter" id="de">German</span>
        <span class="badge badgeFilter" id="en">English</span>
    </li>
    <li class="f1">
        <span class="step">Domain Flow</span>
        <a href="#" id="dF" class="dismiss">
            <i class="glyphicon glyphicon-remove-circle"></i>
        </a>
        <a href="#" onclick="fSetting(this); return false;" class="flowSettings">
            <i class="glyphicon glyphicon-cog"></i>
        </a>
        <span class="badge badgeFilter" id="med">Medicine</span>
    </li>
</ol>

JS

function fSetting (obj) {
    var t = $(obj).closest('span').text();
    tx = $.trim(t);     
    if (tx  == 'Language Flow') {
        $('#flowSettingsLanguage').modal('show');
    } 
    if (tx.contains = 'Domain Flow') {
        $('#flowSettingsDomain').modal('show');
    }
};

Answer 1

I think the main problem is the selector in following line :

 var t = $(obj).closest('span').text();

it's not return the expected span element (because the span is a sibling, not a parent), but replacing it by the following selector work fine :

 var t = $(obj).parents('li').find('.step').text();

Removing also the contains function in condition because you don't need it, just compare the tx string directly, and you can trim your string in same line.

Full js :

fSetting = function (obj) {
    var tx = $.trim($(obj).parents('li').find('.step').text());  

    if (tx  == 'Language Flow') {
        $('#flowSettingsLanguage').modal('show');
    } 
    if (tx.contains = 'Domain Flow') {
        $('#flowSettingsDomain').modal('show');
    }       
};

Take a look at Working fiddle.

Answer 2

Try this:

function fSetting (obj) { 
       var t = $(this).parent.prop('id').val();
       if (t  == 'lF') {
            $('#flowSettingsLanguage').modal('show');
       } 
       else if (t == 'dF') {
            $('#flowSettingsDomain').modal('show');
       }       
};

Answer 3

You should be using an else if in this case at first glance. And you have to use == in your conditional, not =.

if(tx == 'Language Flow') {
    $('#flowSettingsLanguage').modal('show');
}
else if(tx == 'Domain Flow'){
    $('#flowSettingsDomain').modal('show');
}

Answer 4

tx does not have a contains member. It is a string. Also, when you define variables without the var keyword the variable becomes global (accessible from everywhere in your code). The safe thing is to always use the var keyword.
You are assigning a value in the second if expression. It should be == (or preferably ===) and not =.

You have jQuery loaded but you are not using its event handler. One of the reasons to use jQuery is to avoid HTML on* events... you should use it:

// Attach a click handler on the parent element
// Whenever something inside the parent is clicked
// the event will bubble up to the parent, which
// then handles it
$(".targetjQEdit").on("click", ".flowSettings", function () {

    // The span is a sibling of the link, so we need to go
    // up to a common parent and then find the span from there
    var text = $.trim($(this).closest(".f1").find(".step:first").text());

    // Using a switch block here makes sense. Switch blocks
    // are useful if you want to compare a single value to
    // a list of other values
    switch (text) {
        case "Language Flow":
            $('#flowSettingsLanguage').modal('show');
        break;
        case "Domain Flow":
            $('#flowSettingsDomain').modal('show');
        break;
    }
    // Returning false from an event handler prevents the
    // browser's default behaviour. In this case it prevents
    // the browser from following the link
    return false;
});

Finally, you should open your developer console. It will show you any errors you may have, and give you hints at what may be wrong. It is not always completely useful, but that is what search engines are for.

if statement with text not working

4 个答案: