make a conditional only affect a certain number of elements with the same attribute

Question

make a conditional only affect a certain number of elements with the same attribute

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

class Edificio {

	constructor(celda_id, nombre){

		this._celda = celda_id;
		this._nombre = nombre;
	}

	get tipo(){
		return this._tipo;
	}

	trazar(){

		const celdas = opener.document.getElementsByClassName('celda');

		for (let elm of celdas) {

			if (elm.dataset.celda === this._celda) {

				elm.dataset.edificio = this._nombre;
			}
		}
	}
}

class Atraccion extends Edificio {

	constructor(celda_id, nombre, visitantes){

		super(celda_id, nombre);
		this._visitantes = visitantes;
		this._tipo = "atraccion";
	}

	get visitantes(){
		return parseInt(this._visitantes);
	}
}

class Puesto extends Edificio {

	constructor(celda_id, nombre, ingresos){

		super(celda_id, nombre);
		this._ingresos = ingresos;
		this._tipo = "puesto";
	}

	get ingresos(){
		return parseInt(this._ingresos);
	}
}



const edificios = document.getElementsByClassName('edificio');

for (let elm of edificios) {

	elm.onclick = function(){

		if (elm.dataset.coste <= opener.objPartida.saldo) {

			const tipo = elm.dataset.tipo;
			const nombre = elm.dataset.nombre;
			const celda = opener.numeroCelda;

			if (tipo === "atraccion") {

				const visitantes = elm.dataset.visitantes;

				const atraccion = new Atraccion(celda, nombre, visitantes);
				atraccion.trazar();

				opener.objPartida.parque.push(atraccion);
			}

			if (tipo === "puesto") {

				const ingresos = elm.dataset.ingresos;

				const puesto = new Puesto(celda, nombre, ingresos);
				puesto.trazar();

				opener.objPartida.parque.push(puesto);
			}

			opener.objPartida.saldo -= elm.dataset.coste;

			opener.msg("success", "Edificio creado");

			window.close();
		
		} else {

			msg('error', 'Saldo insuficiente (' + opener.objPartida.saldo + '$ restantes)');
		}
	}
}

I would like to make this conditional affect only two elements to change its data-edificio = vacia attribute, its previous value being another. I do not know how to put the conditional. I want to change, for example just data-edificio = "noria" and data-edificio = "troncos" to data-edificio = "vacia" .

 for (let elm of celdas) {

    if() //este condicional no sé cómo ponerlo
       elm.dataset.edificio = "vacia";
 }

Thank you.

Regards,

   

 <div class="mapa">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div class="celda" data-edificio="vacia" data-celda="01"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div class="celda" data-edificio="troncos" data-celda="02"></div>
   <div class="celda" data-edificio="noria" data-celda="03"></div>
   <div class="celda" data-edificio="auditorio" data-celda="04"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div class="celda" data-edificio="vacia" data-celda="05"></div>
   <div></div>
   <div class="celda" data-edificio="vacia" data-celda="06"></div>
   <div class="celda" data-edificio="vacia" data-celda="07"></div>
   <div></div>
   <div></div>
   <div class="celda" data-edificio="vacia" data-celda="08"></div>
   <div class="celda" data-edificio="vacia" data-celda="09"></div>
   <div class="celda" data-edificio="vacia" data-celda="10"></div>
   <div class="celda" data-edificio="vacia" data-celda="11"></div>
   <div class="celda" data-edificio="vacia" data-celda="12"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

javascript

asked by Paula 31.10.2018 в 19:46

source

3 answers

Execute expression when you finish fetching data using Http AngularJs Images broken when showing

score 1 · Answer 1

It was not very clear to me what your final goal is, but the conditional is simple. This serves for the values in particular ('noria', 'trunks')

for (let elm of celdas) {
if(elm.dataset.edificio == "noria" || elm.dataset.edificio == "troncos" ){ //este condicional no sé cómo ponerlo
   elm.dataset.edificio = "vacia";
}

Another alternative would be to change all the values that are different from the value you want to modify ('empty').

for (let elm of celdas) {
if(elm.dataset.edificio != "vacia"){ //este condicional no sé cómo ponerlo
   elm.dataset.edificio = "vacia";
}

score 0 · Answer 2

You can do it with Attribute Equals Selector so you can select elements by their attributes. Your code would look like this:

function cambiar(){
$("[data-edificio='noria']").attr("data-edificio","vacia");
$("[data-edificio='troncos']").attr("data-edificio","vacia");
checkValue()

}
function checkValue(){
console.log("Data celda 03 anteriormente noria: "+$("[data-celda='03']").attr("data-edificio"));
console.log("Data celda 03 anteriormente troncos: "+$("[data-celda='02']").attr("data-edificio"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapa">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="celda" data-edificio="vacia" data-celda="01"></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="celda" data-edificio="troncos" data-celda="02"></div>
			<div class="celda" data-edificio="noria" data-celda="03"></div>
			<div class="celda" data-edificio="auditorio" data-celda="04"></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="celda" data-edificio="vacia" data-celda="05"></div>
			<div></div>
			<div class="celda" data-edificio="vacia" data-celda="06"></div>
			<div class="celda" data-edificio="vacia" data-celda="07"></div>
			<div></div>
			<div></div>
			<div class="celda" data-edificio="vacia" data-celda="08"></div>
			<div class="celda" data-edificio="vacia" data-celda="09"></div>
			<div class="celda" data-edificio="vacia" data-celda="10"></div>
			<div class="celda" data-edificio="vacia" data-celda="11"></div>
			<div class="celda" data-edificio="vacia" data-celda="12"></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
    <button onclick="cambiar()">Cambiar</button>

score 0 · Answer 3

Reading your question, I understood (more or less) that you wanted the elements with data-edificio = "noria" and data-edificio = "troncos" to be changed to data-edificio = "vacía" . In that case, this is the conditional that you should use:

for (let elm of celdas) {
    if(elm.dataset.edificio === 'noria' || data-edificio === 'troncos') {
        elm.dataset.edificio = "vacia";
    }
}

Here we say: "IF elm.dataset.edificio IS EQUAL TO 'noria' Or elm.dataset.edificio IS EQUAL TO 'trunks', then change elm.dataset.edificio to 'empty'".

Now if you want any element that does NOT have data-edificio = "vacía" change to data-edificio = "vacía" , this would be the conditional to use:

for (let elm of celdas) {
    if(elm.dataset.edificio !== 'vacía') {
        elm.dataset.edificio = "vacia";
    }
}

I hope this solves your question.