tengo esta etiqueta de imagen
<div id="google_icon_div"> <%= image_tag "google-icon.png", id: "google_icon", onclick: "test_transl(#{passed_resource}, #{passed_locales.to_json}, #{primary_resource})", remote: true%> </div>Y tengo esta función JS
<script> function test_transl(resource_value, locales_arr, primary_resource){ var primary_text; if (primary_resource.getElementsByClassName('Polaris-TextField__Input')[0] == null) { primary_text = primary_resource.getElementsByClassName('note-editable')[0].innerText } else { primary_text = primary_resource.getElementsByClassName('Polaris-TextField__Input')[0].value } locales_arr = locales_arr.map(i => i.replaceAll('-','_')); var locales_resource_arr = locales_arr.map(i => resource_value + '_' + i); $.ajax({ type: "GET", headers: { "Authorization": "Bearer " + window.sessionToken }, url: "/api/translations/translate_string", dataType: "json", data: {primary_value: primary_text, short_locales_arr: locales_arr}, success: function(result){ for (var i=0; i<locales_arr.length; i++) { my_div = document.getElementById(locales_resource_arr[i]) if (my_div.getElementsByClassName('Polaris-TextField__Input')[0] == null) { my_div.getElementsByTagName('textarea')[0].value = result[i] my_div.getElementsByClassName('note-editable')[0].innerText = result[i] my_div.getElementsByClassName('note-placeholder')[0].innerText = '' } else { my_div.getElementsByClassName('Polaris-TextField__Input')[0].value = result[i].replace(/['"]+/g, '') } } }, error: function (result){ console.log(result, this.error) } }) } </script>Tengo el mismo código en varias otras páginas de vistas con diferencias muy pequeñas. ¿Hay alguna forma en que pueda tratar de hacer que mi código esté SECO? ¿Cómo puedo hacer una sola función JS y poder analizar diferentes objetos a través de un clic y no repetir el mismo código JS en diferentes páginas html.erb?
No tiene claro el "objeto diferente" que le gustaría analizar, así que supongo que quiere decir que necesita encontrar diferentes clases/elementos dom.
Asegúrese de que su JS no esté incrustado en el erb, debe estar en su propio archivo en su directorio js. Luego, en el ERB, agregue el nombre del elemento dom en un archivo oculto que su JS pueda recuperar. Me gusta:
<span id="parseObject" style="display: none">Polaris-TextField__Input</span>Luego, en su JS antes de sus otras llamadas, obtenga el campo de nombre.
const value = document.getElementById('parseObject').value;Entonces su secuencia de comandos se vería como
<script> function test_transl(resource_value, locales_arr, primary_resource){ const parseObjectName = document.getElementById('parseObject').value; var primary_text; if (primary_resource.getElementsByClassName(parseObjectName)[0] == null) { primary_text = primary_resource.getElementsByClassName('note-editable')[0].innerText } else { primary_text = primary_resource.getElementsByClassName(parseObjectName)[0].value } locales_arr = locales_arr.map(i => i.replaceAll('-','_')); var locales_resource_arr = locales_arr.map(i => resource_value + '_' + i); $.ajax({ type: "GET", headers: { "Authorization": "Bearer " + window.sessionToken }, url: "/api/translations/translate_string", dataType: "json", data: {primary_value: primary_text, short_locales_arr: locales_arr}, success: function(result){ for (var i=0; i<locales_arr.length; i++) { my_div = document.getElementById(locales_resource_arr[i]) if (my_div.getElementsByClassName(parseObjectName)[0] == null) { my_div.getElementsByTagName('textarea')[0].value = result[i] my_div.getElementsByClassName('note-editable')[0].innerText = result[i] my_div.getElementsByClassName('note-placeholder')[0].innerText = '' } else { my_div.getElementsByClassName(parseObjectName)[0].value = result[i].replace(/['"]+/g, '') } } }, error: function (result){ console.log(result, this.error) } }) } </script>O algo similar