Вопросы Теги

Как заставить условие работать, если у элемента нет определенного класса, в моем случае & ldquo; active & rdquo ;?

Легкое совместное использование одних и тех же данных между различными представлениями с помощью factories ( заводской документации AngularJS ). Попробуйте этот пример , он использует простую фабрику с именем myFactory для обмена данными между контроллерами. Это также работает на том же контроллере, что и в вашем случае. 

var myApp = angular.module("myApp",[ "ui.router"]);

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "#",
        template: '
{{ aValue }}
',
        controller: "myController"
    }).state("state2", {
        url: "#",
        template: '
{{ aValue }}
',
        controller: "myController"
    });
});


myApp.controller( "myController", function($scope, myFactory) {
    $scope.aValue = myFactory.myValue;

    $scope.bindValue = function (value) {
        $scope.aValue = value;
        myFactory.myValue = value;
    }
});


myApp.factory('myFactory', function () {
    return {
        myValue: ''
    }
});

0
задан Aina Raharison 25 March 2019 в 13:52
поделиться

2 ответа

Вы можете использовать комбинацию CSS и jQuery для достижения этой цели. Я предлагаю вам добавить некоторые общие классы к элементам (пиктограммам), чтобы их было легче выбирать.

Ваш CSS может иметь значения по умолчанию, а в условных выражениях jQuery просто изменить это состояние по умолчанию. По умолчанию не активен и в jQuery просто измените значения в случае активных. Это если вы хотите изменить источник изображения. Для цветов и других вещей, вы можете использовать CSS. Просто добавьте стили под классом .active.

См. Ниже

код довольно прост. Если вам нужно подробное объяснение, пожалуйста, дайте мне знать. А также, возможно, я не правильно понял ваш вопрос. Просто скажите мне в комментариях ниже 

$(".item").click(function(event) {

  const otherContent = $(this).siblings().children()
  const thisContent = $(this).children();
  event.preventDefault();
  
  otherContent.hide()
  $(thisContent).removeClass("hidden").show()
  $(this).addClass("active");
  $(this).siblings().removeClass('active')
  
  
  if (  $(this).is("#item-a")) {
  	// do stuff here
    thisContent.css('color', 'pink')
  } else if (  $(this).is("#item-b")) {
  	// do stuff here
    thisContent.css('color', 'green')
  } else if (  $(this).is("#item-c")) {
  	// do stuff here
    thisContent.css('color', 'purple')
  }
  
});
.item {
  /* no active class */
  background: red;
}

.item.active {
  /* with active class */
  background: blue;
}

.item > div {
  display: none;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item-a" class="item">
  iconA
  <div id="content-a">
    content A
  </div>
</div>
<div id="item-b" class="item">
  iconB
  <div id="content-b">
    content B
  </div>
</div>
<div id="item-c" class="item">
  iconC
  <div id="content-c">
    content C
  </div>
</div>

0
ответ дан Mihai T 25 March 2019 в 13:52
поделиться

вы можете заставить условие работать, если нет определенного класса или вы можете добавить класс. пожалуйста, обратитесь к приведенному ниже коду.

я использовал jquery и css для объяснения этой проблемы. 

$('.det').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
})
.active{
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="det">click here again and again</div>

<div class='det'>click here again and again</div>

0
ответ дан Bathri Nathan 25 March 2019 в 13:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: