предупреждение, когда конкретный текст появляется в div в jquery

Question

Я хочу включить некоторые панели, когда в div появится определенный текст. Например, когда текст «Это допустимый хост» появляется в определенном div, будет выдано предупреждение, и некоторые элементы должны быть включены (которые отключены в начале). Если текст не появляется, то предупреждением будет «Недопустимый хост». Я выполнил приведенный ниже код, но каждый раз, когда он показывает предупреждение о том, что «действительный хост, панели включены». Вот мой код:

<script> 
$("#divoutput").bind("DOMSubtreeModified" , function(){ 
if (("#divoutput").innerhtml=="This a valid host") 
{alert ("valid host , panels are enabled"); 
$('#text1').attr('disabled', false); 
$('#text2').attr('disabled', false); 
$('#text3').attr('disabled', false); 
$('#text4').attr('disabled', false); 
elseif (("#divoutput").innerhtml=="") 
alert ("Invalid host , "); 
}) 
</script> 

Answer 1

@ Абхишек, вы пропустили фигурные скобки в вашем code.try с below.Updated ур кода.

$("#divoutput").bind("DOMSubtreeModified" , function(){ 
if (("#divoutput").innerhtml=="This a valid host") 
{ 
    alert ("valid host , panels are enabled"); 
    $('#text1').attr('disabled', false); 
    $('#text2').attr('disabled', false); 
    $('#text3').attr('disabled', false); 
    $('#text4').attr('disabled', false); 
} 
else if (("#divoutput").innerhtml== " ") 
{ 
    alert ("Invalid host"); 
} 

}); 

Answer 2

Вы можете сделать это следующим образом:

$("#divoutput").on("DOMSubtreeModified", function() { 
 
    if ($(this).text() === "This a valid host") { 
 
    alert("valid host , panels are enabled"); 
 
    $('#text1').attr('disabled', false); 
 
    $('#text2').attr('disabled', false); 
 
    $('#text3').attr('disabled', false); 
 
    $('#text4').attr('disabled', false); 
 
    } else if ($(this).text() === ""){ 
 
    alert("Invalid host"); 
 
    } 
 
}); 
 

 
setTimeout(function(){ 
 
    $("#divoutput").html("This a valid host"); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="divoutput"></div>

Обратите внимание, что вы можете использовать $(this) внутри обратного вызова, чтобы обратиться к выходному элементу DIV #. Возможно, вы также могли бы убрать все ссылки на # text1, # text2, # text3 и т. Д., Используя starts with selector.

Может быть: $("input[id^='text']").attr('disabled', false);

Answer 3

Есть недействителен selectors и еще несколько человеческих ошибок в представленной сниппета

пройти через пример, приведенный ниже:

$("#divoutput").bind("DOMSubtreeModified", function() { 
 
    if (this.innerText == "This a valid host") { 
 
    alert("valid host , panels are enabled"); 
 
    } else if (this.innerText == "") { 
 
    alert("Invalid host , "); 
 
    } 
 
}); 
 
$('#btn').on('click', function() { 
 
    var selctor = $("#divoutput"); 
 
    var html = selctor.text(); 
 
    if (html) { 
 
    selctor.html(''); 
 
    } else { 
 
    selctor.html('This a valid host'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="divoutput">Hello</div> 
 
<Button id='btn' type='button'>Change</Button>

Fiddle here

Answer 4

Вы имеете в виду вот это?

HTML:

<div id="text">This is a valid host</div> 
<input type="radio" id="input" disabled="true"> 
<button id="button">Click</button> 

Javascript:

$(document).ready(function(){ 
    $('#button').click(function(){ 
     if(document.getElementById('text').innerHTML == "This is a valid host"){ 
      $('#input').removeAttr("disabled"); 
      alert("Valid host , panels are enabled"); 
     } else { 
      $('#input').attr("disabled", "true"); 
      alert("Invalid host"); 
     } 
    }); 
}); 

После того, как вы нажмете на кнопку, она будет проверять, если "Это действительный хозяин" текст существует. Если текст действительно существует, переключатель будет включен.