Tengo la siguiente estructura que no se puede cambiar:
<div class="activityinstance"> <a class="aalink" onclick="" href="https://..."> <img src="..../icon" class="iconlarge activityicon"> <span class="instancename">[h5p-iv] Interaktives Video <span class="accesshide ">Interactive Content</span> </span> </a> </div>Lo que debo hacer es cambiar el ícono si span.instancename contiene "[h5p-iv]" (además, idealmente, eliminar u ocultar esa cadena parcial del intervalo)
El "si" y "entonces" no son parte del código y la última línea está sin terminar, esto tiene la intención de mostrar lo que quiero lograr. ¿Cómo construyo un if-then en Javascript para lograr esa lógica?
si
$(".activityinstance .instancename:contains('[h5p-iv]')")después
$(".activityicon") attr("src", "/static/img/icons/video.svg");La segunda parte es cambiar.
<span class="instancename">[h5p-iv] Interaktives Video</span>dentro
<span class="instancename">Interaktives Video</span>es decir: eliminar la cadena de "contiene"
Explicación: Moodle no distingue actividades H5P, todas tienen el mismo icono. Se supone que los maestros pueden ingresar cadenas en los nombres de las actividades para obtener un ícono diferente. Entonces, al final, habrá una lista de cadenas vinculadas a diferentes íconos. Si eso se puede simplificar con un interruptor, etc., incluso mejor, pero no hay tantos íconos diferentes, por lo que no sería razonable repetir el código.
Adiciones 1: se agregó span.accesshide porque se volvió visible después del reemplazo de la cadena.
Adiciones 2: De hecho, tengo un (tipo de) código que funciona ahora, pero supongo que podría hacerse de manera más segura y elegante... ¿Alguna sugerencia?
var elem = $(".instancename:contains('[icon-video]')"); if (elem.length) { $(".instancename:contains('[icon-video]')").each(function() { $(this).prev().attr("src", "/static/img/icons/video.svg"); $(".accesshide").remove(); elem.text(function(_, text) { return text.replace('[icon-video] ', ''); }); }); }Esp. eliminar el .accesshide me preocupa, no estoy seguro de lo que hace y preferiría simplemente eliminar la pantalla y no todo el DOM. Supongo que el reemplazo de texto lee todo el texto, incluido el contenido span.accesshide y vuelve a colocar el texto menos el texto reemplazado, pero también elimina la etiqueta span.accesshide, por lo que pierde su css que lo hace invisible.
El objeto jQuery es verdadero, por lo que deberá verificar su longitud para ver si encontró el elemento. Otra cosa que debe hacer es simplemente hacer un reemplazo de cadena simple
var elem = $(".activityinstance .instancename:contains('[h5p-iv]')"); if (elem.length) { $(".activityicon").attr("src", "/static/img/icons/video.svg"); elem.text(function(_, text) { return text.replace('[h5p-iv] ', ''); }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="activityinstance"> <a class="aalink" onclick="" href="https://..."> <img src="..../icon" class="iconlarge activityicon"> <span class="instancename">[h5p-iv] Interaktives Video</span> </a> </div>Ya que dijiste que podría ser múltiple
function replaceThis(text, imgPath) { $(".activityinstance .instancename:contains('" + text + "')").each(function() { const instanceName = $(this); instanceName.find(".accesshide").hide(); instanceName.prev("img").attr("src", imgPath); instanceName.contents().each(function(_, node) { if (node.nodeValue && node.nodeValue.includes(text)) { node.nodeValue = node.nodeValue.replace(text, ""); } }) }); } replaceThis("[h5p-iv] ", "http://placekitten.com/20/20"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="activityinstance"> <a class="aalink" onclick="" href="https://..."> <img src="..../icon" class="iconlarge activityicon"> <span class="instancename">[h5p-iv] Interaktives Video <span class="accesshide ">Interactive Content</span> </span> </a> </div>